如何利用element实现可任意拖拽层级的table表格

如何实现上面，可以任意排序，拖拽层级的tree表格

第一种

利用el-tree + el-table + css进行伪装，这种我只说逻辑。

一、利用接口拿到树形结构，将树形接口递归，给table表格初始化数据，并插入树形的id作为关联字段。

二、el-tree移动操作是，可以通过node-drop监听到的，此时可以改变table数据的排序，达到同步操作的效果

这种方案，就是没法整排任意位置拖动排序

第二种

直接利用el-tree + css，就是上图的效果

一、先利用div画出table表头

二、利用el-tree的插槽画出表身

            <el-tree
              :data="treeData"
              node-key="rowKey"
              default-expand-all
              :draggable="treeDraggable"
              :props="{
                children: 'children',
                label: 'title',
              }"
              :expand-on-click-node="false"
              @node-drop="handleDrop"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="label" :class="{ 'is-leaf': node.isLeaf }">{{
                  node.label
                }}</span>
                >
                <span class="checked">
                  <el-checkbox v-model="data.treeInfo.checked"></el-checkbox>
                </span>
                <span class="target">
                  <el-input
                    @focus="treeDraggable = false"
                    @blur="treeDraggable = true"
                    v-model="data.treeInfo.target"
                  ></el-input>
                </span>
                <span class="linkUrl">
                  <el-input
                    @focus="treeDraggable = false"
                    @blur="treeDraggable = true"
                    v-model="data.treeInfo.linkUrl"
                  ></el-input>
                </span>
              </span>
            </el-tree>

三、利用css消除tree的文字前方缩进，导致名字后面无法对齐的问题

.custom-tree-node {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
   padding-right: 8px;
}

至此上方的表格就画出来了，此时基本已经完成了，但还有一个小小的bug，由于input处于tree层级之中，所以当你想在input框中通过鼠标移动去选中文字时，无法选中，此时会触犯tree的拖动，此时可以给tree定义draggable，:draggable="treeDraggable"，当input聚焦失焦时去动态改变

至此大功告成！！！