element 表格实现置顶/上移/下移操作(基于vue)
需求:表格支持上移,下移,置顶,当第一行的时候,置顶/上移按钮不可点击最后一行下移按钮不可点击,点击提交再一并请求数据。上图效果实现步骤1:<el-table-column prop="name" min-width="200" fixed="right" label="操作"><template slot-scope="scope"><el-button type=
·
需求:
表格支持上移,下移,置顶,当第一行的时候,置顶/上移按钮不可点击
最后一行下移按钮不可点击,点击提交再一并请求数据。上图效果
- 实现步骤1:
<el-table-column prop="name" min-width="200" fixed="right" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="getTopMove(scope.row,scope.$index)" :disabled="scope.$index==0">
置顶
</el-button>
<el-button type="text" size="small" @click="getUpMove(scope.row,scope.$index)" :disabled="scope.$index==0">
上移
</el-button>
<el-button type="text" size="small" @click="getDownMove(scope.row,scope.$index)"
:disabled="dataList.length-1==scope.$index">下移
</el-button>
</template>
</el-table-column>
- 实现步骤2:
methods: {
//置顶
getTopMove(row, index) {
this.dataList.splice(index, 1)
this.dataList.unshift(row)
},
//上移
getUpMove(row, index) {
let arr = this.dataList;
arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
},
//下移
getDownMove(row, index) {
let arr = this.dataList;
arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
},
}
到这就结束了,保存的时候直接拿到dataList去请求接口完事。
更多推荐
已为社区贡献5条内容
所有评论(0)