sortablejs插件实现el-table列拖拽排序

最新推荐文章于 2024-06-09 09:00:00 发布

扶苏1002

最新推荐文章于 2024-06-09 09:00:00 发布

阅读量488

点赞数 2

分类专栏：插件合集文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_44741577/article/details/137064778

版权

插件合集专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中安装并使用Sortable.js插件，通过randomKey实现表格数据的行键优化，实现实时列拖拽和表格的动态重绘。

摘要由CSDN通过智能技术生成

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();
  });
},