element表格表头通过tree组件实现可拖拽改变表头位置以及显示隐藏某个表头

 tableColumns: [
        {
          id: 1,
          label: "序号",
          prop: "id",
          disabled: true,
          fixed: true,
          visible: true,
          width: 100,
        },
        {
          id: 2,
          label: "情况",
          prop: "visitCircumstanceStr",
          disabled: false,
          visible: true,
          width: 150,
        },

        {
          id: 3,
          label: "姓名",
          prop: "stuName",
          disabled: false,
          visible: true,
          width: 150,
        },
  ]

visible: true 控制表头显示与隐藏，初始值为true（显示）
2.table组件使用v-for 遍历 tableColumns 中的值
3.在tree组件绑定 tableColumns 数据

 <el-tree
        ref="tree"
        :data="tableColumns"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="checkArray"
        @check-change="handleCheckChange"
        @node-drag-start="handleDragStart"
        @node-drop="handleDrop"
        :allow-drop="allowDrop"
        draggable
      >
      </el-tree>

data：展示的数据；
show-checkbox：节点是否可被选择 ；
node-key：唯一标识 ；
default-expand-all：是否默认展开所有节点；
default-checked-keys：默认勾选的节点的 key 的数组；
@check-change：节点选中状态发生变化时的回调；
@node-drag-start：节点开始拖拽时触发的事件；
@node-drop：拖拽成功完成时触发的事件；
:allow-drop：拖拽时判定目标节点能否被放置；
draggable：是否开启拖拽节点功能；

checkArray(名字随意)：默认勾选的值；在data中定义 checkArray和dragBool

      //默认check的树节点
      checkArray: [],
      //是否推拽中
      dragBool: false,

1.节点选取改变

 // 节点选取改变
    handleCheckChange(val, checked) {
      this.tableColumns.forEach((item, index) => {
        if (item.id === val.id) {
          item.visible = checked;
        }
      });
      //$nextTick在DOM更新后调用doLayout方法重新计算表格布局
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
      localStorage.setItem("tableColumns", JSON.stringify(this.tableColumns));
    },

2.开始拖拽

 //开始拖拽
    handleDragStart(node, ev) {
      this.dragBool = node.data.visible;
    },

3.拖拽放下

 handleDrop(draggingNode, dropNode, dropType, ev) {
      setTimeout(() => {
        let array = [];
        this.tableColumns.forEach((item, key) => {
          if (item.id === draggingNode.data.id && this.dragBool)
            this.tableColumns[key].visible = true;
        });
        this.tableColumns.forEach((item) => {
          if (item.visible) array.push(item.id);
        });
        this.dragBool = false;
        this.$refs.tree.setCheckedKeys(array);
      }, 0);
    },

4.放下

  //放下
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.level === dropNode.level) {
        //同级
        if (draggingNode.parent.id === dropNode.parent.id) {
          // 向上拖拽 || 向下拖拽
          return type === "prev" || type === "next";
        }
      }
    },