elementUI el-table上移下移

最新推荐文章于 2024-10-08 08:50:04 发布

原创最新推荐文章于 2024-10-08 08:50:04 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

文章展示了如何在Vue.js应用中使用el-table组件处理表格数据。通过deleteRow方法实现了选中行在列表中的上移和下移功能，利用splice方法动态更新数据数组。

<el-table
:data="channelForm.selectedChannelList"
style="width: 100%">
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="text">
</el-table-column>
<el-table-column
fixed="right"
width="100">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'up')" type="text" size="small">上移</el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row, 'down')" type="text" size="small">下移</el-button>
</template>
</el-table-column>
</el-table>

deleteRow (index, e, type) {
if (type === 'up') {
if (index === 0) {
return
}
// 在上一项插入该项
this.channelForm.selectedChannelList.splice(index - 1, 0, (this.channelForm.selectedChannelList[index]))
// 删除后一项
this.channelForm.selectedChannelList.splice(index + 1, 1)
} else if (type === 'down') {
if (index === (this.channelForm.selectedChannelList.length - 1)) {
return
}
// 在下一项插入该项
this.channelForm.selectedChannelList.splice(index + 2, 0, (this.channelForm.selectedChannelList[index]))
// 删除前一项
this.channelForm.selectedChannelList.splice(index, 1)
}
},