背景：
实现页面 用户自定义 table列表 拖拽排序
步骤：
一、 导入 Sortablejs插件
npm install sortablejs --save二、在使用的页面中导入
import Sortable from 'sortablejs';三、HTML代码：
<el-table :data="tableData" row-key="id">
<el-table-column
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="col[index].prop"
:label="item.label"
align="center"
></el-table-column>
</el-table>备注：
需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。但是不可用index，因为拖拽后index会变，会有问题。
四、JS代码:
<script>
import Sortable from "sortablejs"
export default {
data() {
return {
dateQuery: '',
col:[
{label: '手机号', prop: 'sjh' },
{label: '姓名', prop: 'name' },
{label: '邮箱', prop: 'youxiang' },
{label: '参会单位', prop: 'address' },
{label: '职务', prop: 'zhiwu' },
{label: '所参会仪', prop: 'suocanhuiyi' },
],
dropCol:[
{label: '手机号', prop: 'sjh' },
{label: '姓名', prop: 'name' },
{label: '邮箱', prop: 'youxiang' },
{label: '参会单位', prop: 'address' },
{label: '职务', prop: 'zhiwu' },
{label: '所参会仪', prop: 'suocanhuiyi' },
],
tableData: [{
sjh:'13856958563',
name: '王小虎1',
youxiang:'[email protected]',
address: '北京市海阔天空有限公司',
zhiwu:'部门经理',
suocanhuiyi:'杂志社交流活动',
}, {
sjh:'13856958563',
name: '王小虎2',
youxiang:'[email protected]',
address: '北京市海阔天空有限公司',
zhiwu:'部门经理',
suocanhuiyi:'杂志社交流活动',
},{
sjh:'13856958563',
name: '王小虎3',
youxiang:'[email protected]',
address: '北京市海阔天空有限公司',
zhiwu:'部门经理',
suocanhuiyi:'杂志社交流活动',
},{
sjh:'13856958563',
name: '王小虎4',
youxiang:'[email protected]',
address: '北京市海阔天空有限公司',
zhiwu:'部门经理',
suocanhuiyi:'杂志社交流活动',
},{
sjh:'13856958563',
name: '王小虎5',
youxiang:'[email protected]',
address: '北京市海阔天空有限公司',
zhiwu:'部门经理',
suocanhuiyi:'杂志社交流活动',
},{
sjh:'13856958563',
name: '王小虎6',
youxiang:'[email protected]',
address: '北京市海阔天空有限公司',
zhiwu:'部门经理',
suocanhuiyi:'杂志社交流活动',
},
],
}
},
methods: {
rowDrop () {
// 此时找到的元素是要拖拽元素的父容器
const tbody = document.querySelector('.el-table__body-wrapper tbody');
const _this = this;
let data = [];
Sortable.create(tbody, {
draggable: ".el-table__row",
onEnd ({ newIndex, oldIndex }) {
// 将 拖拽后的列表信息 存到 data变量中
data = _this.tableData;
}
});
// 将 data变量中的 信息 赋值给 tableData 重新渲染列表数据
if(!data){
this.tableData = data;
}
},
// 列拖拽
columnDrop () {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex];
this.dropCol.splice(evt.oldIndex, 1);
this.dropCol.splice(evt.newIndex, 0, oldItem);
}
});
}
},
mounted () {
this.rowDrop();
this.columnDrop();
},
created(){
},
}
</script>备注：
如果 不需要 列拖拽功能，可以按照传统样式定义table列表，col、dropCol属性 及 columnDrop() 函数 可以删掉
页面效果：
拖拽前：
行 拖拽后：
