vue+element ui实现表格拖拽功能
需求:vue框架中,使得el-table实现拖拽变更表格顺序的功能。方法:引入插件Sortable.js,其中文API可参考Sortable.js中文网首先利用npm引入插件sortablejs,如图然后直接上代码,api简单易懂易上手:<template><div><!-- 表格 -注意:table必须有唯一key值供拖拽,必须设置row-key拖拽才有效 --&g
·
需求:vue框架中,使得el-table实现拖拽变更表格顺序的功能。
方法:引入插件Sortable.js,其中文API可参考 Sortable.js中文网
首先利用npm引入插件sortablejs,如图
然后直接上代码,api简单易懂易上手:
<template>
<div>
<!-- 表格 -注意:table必须有唯一key值供拖拽,必须设置row-key拖拽才有效 -->
<el-table :data="tableDatatest" border class="t1" row-key="id" highlight-current-row>
<!-- 用于拖拽的列 -->
<el-table-column prop="id" type="index" label="id" align="center" class-name="handle">
<i class="el-icon-rank" style="font-size: 14px;" />
</el-table-column>
<!-- 普通数据列 -->
<el-table-column prop="title" label="title" align="center" />
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs' // 引入插件
export default {
data() {
return {
// 表格数据
tableDatatest: [
{ id: 0, title: 'title1' }, { id: 1, title: 'title2' },
{ id: 2, title: 'title3' }, { id: 3, title: 'title4' }
]
}
},
mounted() {
// 允许拖拽(注意:在created中无效)
this.sortable('t1', 'tableDatatest') // 参数分别为table的class名称,table的数据data
},
methods: {
// 拖拽table test
sortable(className, targetName) {
const table = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
const that = this
Sortable.create(table, {
handle: '.handle',
// 拖拽完毕后触发
onEnd({ newIndex, oldIndex }) {
if (newIndex === oldIndex) return
that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
}
})
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)