vxetable自定义列+拖拽+数据持久化

<!-- 列拖拽 -->
<template>
  <div>
    <!-- 刷新之后的拖拽效果失效？可以将选中的和拖拽后的结果返回给后端然后进行展示-->
    <vxe-grid ref="xGrid2" v-bind="gridOptions2" @custom="customEvent" :custom-config="{storage: true}" id="toolbar">
    </vxe-grid>
  </div>
</template>
<script>
import Sortable from "sortablejs";
import VXETable from "vxe-table";
export default {
  data() {
    return {
      gridOptions2: {
        border: true,
        showFooter: true,
        class: "sortable-column-demo",
        columnConfig: {
          useKey: true,
          minWidth: 200,
        },
        scrollX: {
          enabled: false,
        },
        footerMethod: this.footerMethod,
        toolbarConfig: {
          custom: {
            trigger: "click",
            immediate: "immediate",
          }, //自定义列配置,默认继承
        },
        columns: [
          { field: "name", title: "Name", fixed: "left", width: 300 },
          { field: "nickname", title: "Nickname" },
          { field: "role", title: "Role" },
          { field: "sex", title: "Sex" },
          { field: "age", title: "Age" },
          { field: "date3", title: "Date" },
          { field: "address", title: "Address", width: 200, showOverflow: true },
        ],
        data: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: "Man",
            age: 28,
            address: "Shenzhen",
          },
          {
            id: 10002,
            name: "Test2",
            nickname: "T2",
            role: "Test",
            sex: "Women",
            age: 22,
            address: "Guangzhou",
          },
          {
            id: 10003,
            name: "Test3",
            nickname: "T3",
            role: "PM",
            sex: "Man",
            age: 32,
            address: "Shanghai",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "Women",
            age: 23,
            address: "Shenzhen",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "Women",
            age: 30,
            address: "Shanghai",
          },
        ],
        columns_data: [],
      },
    };
  },
  // 将默认展示的数据取出在created中去展示
  created() {
    this.columnDrop2();
  },
  beforeDestroy() {
    if (this.sortable2) {
      this.sortable2.destroy();
    }
  },
  methods: {
    //可以将选中的返回给后端(customDataList)
    customEvent() {
      let customDataList = [];
      (this.$refs.xGrid2.getColumns()).forEach(item => {
        if (item.type != "seq") {
          customDataList.push(item.property);
        }
      });
      console.log(customDataList);
    },
    meanNum(list, field) {
      let count = 0;
      list.forEach((item) => {
        count += Number(item[field]);
      });
      return count / list.length;
    },
    sumNum(list, field) {
      let count = 0;
      list.forEach((item) => {
        count += Number(item[field]);
      });
      return count;
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "平均";
          }
          if (["age", "sex"].includes(column.property)) {
            return this.meanNum(data, column.property);
          }
          return null;
        }),
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "和值";
          }
          if (["age", "sex"].includes(column.property)) {
            return this.sumNum(data, column.property);
          }
          return null;
        }),
      ];
    },

    columnDrop2() {
      this.$nextTick(() => {
        const $table = this.$refs.xGrid2;
        console.log("$table",$table.$el);
        this.sortable2 = Sortable.create(
          $table.$el.querySelector(
            ".body--wrapper>.vxe-table--header .vxe-header--row"
          ),
          {
            handle: ".vxe-header--column",
            onEnd: ({ item, newIndex, oldIndex }) => {
              const { fullColumn, tableColumn } = $table.getTableColumn();//获取当前表格的列,全量表头列和当前渲染中的表头列
              const targetThElem = item;
              const wrapperElem = targetThElem.parentNode;
              console.log("wrapperElem", wrapperElem);
              const newColumn = fullColumn[newIndex];//newComn是目标的位置
              if (newColumn.fixed != undefined) {
                console.log("错误的移动")
                const oldThElem = wrapperElem.children[oldIndex];
                if (newIndex > oldIndex) {
                  wrapperElem.insertBefore(targetThElem, oldThElem);
                } else {
                  wrapperElem.insertBefore(
                    targetThElem,
                    oldThElem ? oldThElem.nextElementSibling : oldThElem
                  );
                }
                VXETable.modal.message({
                  content: "固定列不允许拖动，即将还原操作！",
                  status: "error",
                });
                return;
              }
              // 获取列索引 columnIndex > fullColumn
              const oldColumnIndex = $table.getColumnIndex(
                tableColumn[oldIndex]
              );
              const newColumnIndex = $table.getColumnIndex(
                tableColumn[newIndex]
              );
              // 移动到目标列
              const currRow = fullColumn.splice(oldColumnIndex, 1)[0];
              fullColumn.splice(newColumnIndex, 0, currRow);
              $table.loadColumn(fullColumn);//列重载
              //存到需要展示的地方
              this.gridOptions2.columns_data = [];
              for (let j = 0; j < fullColumn.length; j++) {
                //每次拖拽后保存的值和顺序
                if (fullColumn[j].visible) {
                  console.log(fullColumn[j].field);
                  let obj = { field: "", title: "", fixed: "", showOverflow: "" };
                  obj.field = fullColumn[j].field;
                  obj.title = fullColumn[j].title;
                  obj.fixed = fullColumn[j].fixed;
                  obj.showOverflow = fullColumn[j].showOverflow;
                  this.gridOptions2.columns_data.push(obj);
                }
              }
            },
          }
        );
      });
    },
  },
};
</script>
<style lang="sass" scoped>
.sortable-column-demo .vxe-header--row .vxe-header--column.sortable-ghost,
.sortable-column-demo .vxe-header--row .vxe-header--column.sortable-chosen
  background-color: #dfecfb

  .sortable-column-demo .vxe-header--row .vxe-header--column.col--fixed
    cursor: no-drop
</style>