前言
ElementUI中的Table组件对于展示数据来说，有着不可替代的作用。但是也有一点点小缺陷，比如行不支持拖拽效果。
当然我们可以借助于第三方库来实现行拖拽效果。
实现方法
实现拖拽效果需要借助于sortablejs库来实现。
GitHub：https://github.com/SortableJS/Sortable
中文网站(无法验证是否为官方网店)：http://www.sortablejs.com/
sortablejs有以下优点（摘至部分readme文档）：
- Supports touch devices and modern browsers (including IE9) 支持大部分触屏设备及现代浏览器（包括IE9）
- Can drag from one list to another or within the same list 支持列内拖动及列间拖动
- CSS animation when moving items 支持拖动时动画效果
- Multi-drag support 支持同时拖动多个
- Built using native HTML5 drag and drop API 根据原生Html5 drag和drop API穿件
- 支持多种框架（Meteor、Angular、React、Knockout、Ploymer、Vue、Ember）
- 等等其他。。。
安装sortablejs
npm方式:
$ npm install sortablejs --save
使用
- 普通
el-table代码如下：
<template>
<el-table
:data="tableData"
border
row-key="date"
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
],
};
},
};
</script>
- 引入
sortablejs组件：
<template>
<!-- 对eltable设置一个名为draggable-table的class -->
<el-table
:data="tableData"
border
row-key="date"
class="draggable-table"
style="width: 100%"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
<script>
import Sortable from "sortablejs";
export default {
data() {
return {
tableData: [
// 略去数据，与前段代码一直
],
};
},
mounted() {
// 需要支持拖动效果的列表容器，在这里我们设置为el-table组件的tbody，
// 注意：最前面的一段为前面el-table的class: draggable-table，主要为了防止如果页面有多个table，多个table同时实现拖拽效果
// 当然，如果多个table都需要拖拽效果，选择器中最前面的.draggable-table可以去除。
const tbody = document.querySelector(".draggable-table .el-table__body-wrapper tbody");
new Sortable(tbody, {
animation: 150,
// 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
onEnd: ({
newIndex, oldIndex }) => {
const targetRow = this.tableData[oldIndex];
this.tableData.splice(oldIndex, 1);
this.tableData.splice(newIndex, 0, targetRow);
console.table(this.tableData);
},
});
},
};
</script>
<style scoped>
</style>
至此，拖拽效果就已完成，具体效果如下：
详细代码请移步至：https://codesandbox.io/s/el-table-drag-row-qj1ws7
后记
如有疑问，可以在评论区进行交流。也欢迎点赞⭐收藏 ：）
拓展阅读：