1. 安装sortablejs
npm install sortablejs -S
2. 模板中
- tableData 表格数据
- randomKey 用于表格重绘
- row-key 优化表格渲染
<el-table
:data="tableData"
:key="randomKey"
:row-key="(row) => row.id"
>
<el-table-column
v-for="item in columnProps"
:label="item.label"
:prop="item.prop"
align="center"
header-align="center"
>
</el-table-column>
</el-table>
3. data中
data() {
return {
/* 表格数据 */
tableData: [
{ name: "张三", sex: "男", age: 18, class: "一班" },
{ name: "李四", sex: "女", age: 19, class: "二班" },
{ name: "王五", sex: "男", age: 20, class: "三班" },
],
/* 显示的字段 */
colum: [
{
label: "姓名",
prop: "name",
},
{
label: "性别",
prop: "sex",
},
{
label: "年龄",
prop: "age",
},
{
label: "班级",
prop: "class",
},
],
/* 用于表格重绘的key */
randomKey: Math.random().toString(36).valueOf(),
/* sortablejs插件创建的实例对象 */
sortable: null,
};
},
mounted() {
/* 初始化sortable实例对象 */
this.initColumnDrop();
},
/**
* 初始化sortable实例对象
*/
initColumnDrop() {
const _this = this;
const wrapperTr = document.querySelector(".el-table__header tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: (evt) => {
const empty = 1;
// 跳过显示的列数量,如开头我们用了一个多选框,h和序号
const oldItem = this.columnProps[evt.oldIndex - empty];
this.columnProps.splice(evt.oldIndex - empty, 1);
this.columnProps.splice(evt.newIndex - empty, 0, oldItem);
// 每一次拖拽后都要重绘一次表格;
this.reDrawer();
},
});
},
/**
* 触发表格重绘
*/
reDrawer() {
this.randomKey = Math.random().toString(36).valueOf();
this.$nextTick(() => {
// 重新初始化sortable实例对象
this.initColumnDrop();
});
},