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

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>