[Vue2]el-table+sortablejs实现列拖动，解决拖拽后列宽不变和无法改变问题

July twelve

已于 2023-02-13 16:02:33 修改

阅读量6.2k

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2023-02-13 15:54:23 首次发布

本文链接：https://blog.csdn.net/yys190418/article/details/129010694

版权

VUE 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue.js项目中使用el-table组件和SortableJS库来实现表格列的拖拽功能，允许用户通过拖动调整列宽。代码示例详细说明了数据结构、模板和方法，包括`mounted`钩子函数中的初始化设置以及`headerDragend`事件处理函数，用于更新列宽。

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

el-table拖拽--改变列宽1

el-table拖拽--改变列宽2

<template>
  <div class="page">
    <el-table
      :data="tableData"
      row-key="id"
      border
      style="width: 100%"
      @header-dragend="headerDragend"
    >
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column
        v-for="item in colList"
        align="center"
        show-overflow-tooltip
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.minWidth"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      //动态列数组
      colList: [
        {
          label: "日期",
          prop: "date",
          minWidth: 100,
        },
        {
          label: "姓名",
          prop: "name",
          minWidth: 200,
        },
        {
          label: "地址",
          prop: "address",
          minWidth: 300,
        },
      ],
      //拖拽列
      dropCol: [
        {
          label: "日期",
          prop: "date",
          minWidth: 100,
        },
        {
          label: "姓名",
          prop: "name",
          minWidth: 200,
        },
        {
          label: "地址",
          prop: "address",
          minWidth: 300,
        },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "A",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "B",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "C",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "D",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
  mounted() {
    this.dropCol = this.columnDrop(this.dropCol);
  },
  methods: {
    // 列拖动
    columnDrop(dropCol) {
      //获取dom节点
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = dropCol[evt.oldIndex - 1];
          dropCol.splice(evt.oldIndex - 1, 1);
          dropCol.splice(evt.newIndex - 1, 0, oldItem);
          this.colList = [];
          this.$nextTick(() => {
            this.colList = dropCol;
          });
        },
      });
      return dropCol;
    },
    // 列宽改变
    headerDragend(newWidth, _, column) {
      this.colList.forEach((e) => {
        if (e.prop === column.property) {
          e.minWidth = newWidth;
        }
      });
      this.dropCol = [];
      this.$nextTick(() => {
        this.dropCol = this.columnDrop(this.dropCol);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: aqua;
}
</style>