结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容、列内容、以及此行索引值, table上绑定数组 :data=“newsLis
结合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)
}
}
最后贴出效果图:
到此这篇关于Vue实现table列表项上下移动的示例代码的文章就介绍到这了,更多相关Vue table列表项上下移动内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue实现table列表项上下移动的示例代码
本文链接: https://www.lsjlt.com/news/209704.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0