基于vxetable＜!-- 自定义列＋存本地+拖拽--＞

<!-- 自定义列＋存本地+拖拽-->
<template>
    <div>
        <h1>自定义列＋数据持久化+拖拽</h1>
        <vxe-toolbar ref="xToolbar1" custom>
        </vxe-toolbar>

        <vxe-table
          border
          ref="xTable1"
          id="toolbar"
          :custom-config="{storage: true}"
          @custom="customEvent"
          :data="tableData">
          <vxe-column type="seq" width="60" fixed="left"></vxe-column>
          <vxe-column field="name" title="Name"></vxe-column>
          <vxe-column field="role" title="Role"></vxe-column>
          <vxe-column field="sex" title="Sex"></vxe-column>
          <vxe-column field="age" title="Age"></vxe-column>
          <vxe-column field="address" title="Address"></vxe-column>
        </vxe-table>
    </div>
</template>
<script>
import Sortable from "sortablejs";
import VXETable from "vxe-table";
     export default {
          data () {
            return {
              tableData: [
                { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
                { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
                { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
                { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
                { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
                { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' }
              ],
              columns_data: [],
            }
          },
          created () {
            this.$nextTick(() => {
              // 手动将表格和工具栏进行关联
              this.$refs.xTable1.connect(this.$refs.xToolbar1)
            });
            this.columnDrop2();
          },
          methods:{
            //可以将选中的返回给后端(customDataList)
            customEvent(){
            let customDataList=[];
            (this.$refs.xTable1.getColumns()).forEach(item=>{
              if(item.type!="seq"){
                customDataList.push(item.property);
              }
            });
            console.log(customDataList);
          },
      columnDrop2() {
      this.$nextTick(() => {
        const $table = this.$refs.xTable1;
        this.sortable2 = Sortable.create(
          $table.$el.querySelector(
            ".body--wrapper>.vxe-table--header .vxe-header--row"
          ),
          {
            handle: ".vxe-header--column",
            onEnd: ({ item, newIndex, oldIndex }) => {
              console.log(333,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.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.columns_data.push(obj);
                }
              }
            },
          }
        );
      });
    },
  }
}
</script>