前端js实现表格数据的上移下移
vue项目需求中需要前端实现表格行数据的上移下移,效果如下实现思路:主要使用前端对数组的操作方法splice()代码:tableData: [{name: '1',id: '1'}, {name: '2',id: '2'}, {name: '3',...
·
vue项目需求中需要前端实现表格行数据的上移下移,效果如下
实现思路:主要使用前端对数组的操作方法splice()
代码:
tableData: [{
name: '1',
id: '1'
}, {
name: '2',
id: '2'
}, {
name: '3',
id: '3'
}, {
name: '4',
id: '4'
}, {
name: '5',
id: '5'
}]
<el-table-column width="180">
<template slot-scope="scope">
<el-button
title="上移"
@click="moveup(scope.$index)"
icon="icon-arrow_up">
</el-button>
<el-button
title="下移"
@click="movedown(scope.$index)"
icon="icon-arrow_down">
</el-button>
</template>
</el-table-column>
moveup (val) {
let x = val; let y = val + 1
this.tableData.splice(x - 1, 1, ...this.tableData.splice(y - 1, 1, this.tableData[x - 1]))
},
movedown (val) {
let x = val + 1; let y = val + 2
this.tableData.splice(x - 1, 1, ...this.tableData.splice(y - 1, 1, this.tableData[x - 1]))
},
更多推荐
已为社区贡献14条内容
所有评论(0)