这篇文章主要介绍“Vue怎么实现table列表项上下移动”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么实现table列表项上下移动”文章能帮助大家解决问题。
结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容、列内容、以及此行索引值,
table上绑定数组 :data=“newsList”。
上移和下调两个按钮,并绑定上点击函数,将此行的索引值(scope.$index)作为参数:
<template> <el-table :data="newsList"> <el-table-column type="index" label="序号" width="50"></el-table-column> <el-table-column prop="title" label="文章标题" min-width="300" ></el-table-column> <el-table-column prop="descript" label="文章描述" min-width="300" ></el-table-column> <el-table-column label="操作(素材排序)" > <template slot-scope="scope"> <el-button size="mini" type='text' @click.stop="sortUp(scope.$index, scope.row)">向上↑ </el-button> <el-button size="mini" type='text' @click.stop="sortDown(scope.$index, scope.row)">向下↓</el-button> </template> </el-table-column> </el-table> </template>
上移下移函数,此处的坑,是vue视图更新!!!
直接使用下面这种方式是错误的,虽然tableList的值变了,但是不会触发视图的更新:
upFieldOrder (index) { let temp = this.tableList[index-1]; this.tableList[index-1] = this.tableList[index] this.tableList[index] = temp },
正确方法:
// 上移按钮 sortUp (index, row) { if (index === 0) { this.$message({ message: '已经是列表中第一个素材!', type: 'warning' }) } else { let temp = this.newsList[index - 1] this.$set(this.newsList, index - 1, this.newsList[index]) this.$set(this.newsList, index, temp) } },
同理,下移函数,
// 下移按钮 sortDown (index, row) { if (index === (this.newsList.length - 1)) { this.$message({ message: '已经是列表中最后一个素材!', type: 'warning' }) } else { let i = this.newsList[index + 1] this.$set(this.newsList, index + 1, this.newsList[index]) this.$set(this.newsList, index, i) } }
效果图: