vue3 elementPlus实现表格行列拖拽修改顺序

行云流水626

已于 2023-12-05 10:46:34 修改

阅读量1.2k

点赞数 11

文章标签： vue.js 前端 javascript

于 2023-12-05 10:45:44 首次发布

本文链接：https://blog.csdn.net/Lsir1998/article/details/134801261

版权

第一步：安装sortable.js

npm install sortablejs --save

第二步：再组件中引入使用

import Sortable from "sortablejs";

第三步：实现行或者列拖拽

function setSort() {//行拖拽
  const tbody = document.querySelector('#dragTable table tbody') as HTMLElement;
  new Sortable(tbody, {
    animation: 150,
    sort: true,
    ghostClass: 'sortable-ghost',
    onEnd: (e: any) => {
      console.log("e", e);
      const targetRow = list.value.splice(e.oldIndex, 1)[0];
      list.value.splice(e.newIndex, 0, targetRow);
    },
  });
}

function setSortCloumn() {//列拖拽
  const wrapperTr  = document.querySelector('.el-table__header-wrapper tr');
  Sortable.create(wrapperTr , {
    animation: 180,
    delay: 0,
    onEnd: (evt:any) => {
      // 跳过显示的列数量，如开头我们用了一个多选框
      const oldItem = props.tableConfig.columns[evt.oldIndex];
      props.tableConfig.columns.splice(evt.oldIndex, 1);
      props.tableConfig.columns.splice(evt.newIndex, 0, oldItem);
      //防止表头数据改变，但表头未重新渲染
      //在自定义表头的时候，由于是用的v-for循环生成的，因此会给每个循环体一个固定的key，导致数据频繁异步更新时，因为这个key没有变，所以el-table觉得表头数据是没有变化的，因此就只更新了整体表格数据、key值有变化的列的表头。
      mykey.value = Math.floor(Math.random()*1000+1) 
    }
  });
}