Vue实现table上下移动功能示例

网络编程 2024/11/17 佚名

3 1 2

本文实例讲述了Vue实现table上下移动功能。分享给大家供大家参考，具体如下：

结合Element组件，scope中有三个参数（row，cow，$index）分别表示行内容、列内容、以及此行索引值，

table上绑定数组 :data="tableList"

<el-table :data="tableList">
</el-table>

添加一列，里面放上上移和下调两个按钮，并绑定上函数，将此行的索引值(scope.$index)作为参数，样式根据需求自己调整：

<el-button icon="el-icon-arrow-up" :disabled="scope.$index === 0" @click="upFieldOrder(scope.$index)"></el-button>
<el-button icon="el-icon-arrow-down" :disabled="scope.$index === tableList.length - 1" @click="downFieldOrder(scope.$index)"></el-button>

直接使用下面这种方式是错误的，虽然tableList的值变了，但是不会触发视图的更新：

upFieldOrder (index) {
  let temp = this.tableList[index-1];
  this.tableList[index-1] = this.tableList[index]
  this.tableList[index] = temp
 },

正确的上移函数：

upFieldOrder (index) {
  let temp = this.tableList[index-1];
  Vue.set(this.tableList, index-1, this.tableList[index])
  Vue.set(this.tableList, index, temp)
 },

同理，下移函数如下：

downFieldOrder (index) {
  let i = this.tableList[index+1];
  Vue.set(this.tableList, index+1, this.tableList[index])
  Vue.set(this.tableList, index, i)
 }

如此，前端的调整table顺序功能便做好了，我不是在每一次点击都与后台交互传入新Order，在页面销毁时，一并提交：

destroyed() {
 let param = {
  infos: []
 }
 this.tableList.forEach((dataItem,index) => {
  param.infos.push({
  参数1: dataItem.值1,
  参数1: dataItem.值2,
  参数顺序: index
  })
 });
 // 调用后台，并传入 param
 changeTableOrder(param).then(res => {
  if(res.success=== true) {
 alert('顺序调整成功')
  }
 })
 }

希望本文所述对大家vue.js程序设计有所帮助。

Vue,table,上下移动

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Vue实现table上下移动功能示例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

Vue实现table上下移动功能示例

angularjs实现table表格td单元格单击变输入框/可编辑状态示例

JavaScript数组、json对象、eval()函数用法实例分析

评论“Vue实现table上下移动功能示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接