43 带 fixed 列的 el-table 不兼容于 sortablejs

前言

这是一个基于 sortablejs 来实现的 el-table 的拖拽功能的基础实现 

然后 这个过程中遇到的一个比较特殊的问题是, 关于 el-table-column 的 fixed 的属性, 对于 sortablejs 这边来定位目标选择列 影响的一个问题 

在基础的用例中, 使用 “.el-table__body-wrapper tbody” 去定位目标元素, 然后 带 class 为 draggableClass 的元素作为可以拖拽的元素, 来实现 拖拽的交互

基础的拖拽的实现

测试用例如下 

<template>
  <div class="testParent">

    <el-table :data="weekPlan" row-key="id">
      <el-table-column label="id" prop="id" ></el-table-column>
      <el-table-column label="星期" prop="name" ></el-table-column>
      <el-table-column label="移动" >
        <div class="draggableClass" style="width:20px; height:20px; background-color: blue; cursor:move;" ></div>
      </el-table-column>
<!--      <el-table-column label="移动fixedLeft" :fixed="'left'" >-->
<!--        <div class="draggableClass" style="width:20px; height:20px; background-color: blue; cursor:move;" ></div>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="移动fixedRight" :fixed="'right'" >-->
<!--        <div class="draggableClass" style="width:20px; height:20px; background-color: blue; cursor:move;" ></div>-->
<!--      </el-table-column>-->
    </el-table>

  </div>

</template>

<script>

  import Sortable from "sortablejs"

  export default {
    name: "HelloTableSortable",
    data() {
      return {
        weekPlan: [
          {
            id: "01",
            name: "monday",
            sort: 10,
          },
          {
            id: "02",
            name: "tuesday",
            sort: 22,
          },
          {
            id: "03",
            name: "wednesday",
            sort: 12,
          }
        ],
      }
    },
    computed: {},
    mounted() {
      this.$nextTick(() => {
        setTimeout(this.handleSortable, 100)
      })

      // sort demo
      this.weekPlan.sort((e1, e2) => e1.sort - e2.sort)
      console.log(this.weekPlan)
    },
    created() {
    },
    methods: {
      handleSortable() {
        let _this = this
        const tbody = document.querySelector(".el-table__body-wrapper tbody")
        Sortable.create(tbody, {
          handle: ".draggableClass",
          animation: 350,
          easing: 'cubic-bezier(0.34,1.56,0.64,1)',
          onEnd: ({newIndex, oldIndex}) => {
            let isMoveUp = newIndex < oldIndex
            let oldEntry = _this.weekPlan[oldIndex]
            // 2 -> 0
            if(isMoveUp) {
              for(let i=oldIndex; i>newIndex; i--) {
                _this.weekPlan[i] = _this.weekPlan[i-1]
              }
              // 0 -> 2
            } else {
              for(let i=oldIndex; i<newIndex; i++) {
                _this.weekPlan[i] = _this.weekPlan[i+1]
              }
            }
            _this.weekPlan[newIndex] = oldEntry
            console.log(_this.weekPlan.map(e => e.id))
          }
        })
      }
    },
  }
</script>

<style>

</style>

效果如下, console 里面打印的是 拖拽结束之后的一个最新的顺序 

具体的记录的 sort, 就是该元素的索引 

从 dom 结构来看, 是一个单纯的一个 table, 然后下面是 th, 各个 tr 

然后 我们业务代码中基于 “.el-table__body-wrapper tbody . draggableClass” 可以正常的定位到目标拖拽元素 

目标拖拽元素在 带fixed的 el-table-column 上面的异常情况 

基于上面的测试用例, 注释掉 “移动” 列, 解除注释 “移动fixedLeft”, “移动fixedRight” 列 

然后 这时候 你可以发现, 拖动 这两列 都不行了, 不管是拖拽 “移动fixedLeft”列, 还是 “移动fixedRight”列 

这个时候 页面 dom 结构如下

可以看到这时候 dom 树上面有三个 table, 一个在 el-table 下面, 一个在 el-table 下面的 el-table__fixed 下面, 一个在 el-table 下面的 el-table__fixed-right 下面 

el-table 下面的 el-table__fixed 下面 table, 主要是这部分配置了 fixed=’left‘ 的 el-table-column 的展示交互 

el-table 下面的 el-table__fixed-right 下面 table, 主要是这部分配置了 fixed=’right‘ 的 el-table-column 的展示交互 

页面上 “移动fixedRight“ 选择列右键查看元素, 可以看到 在最上层的元素是 使用的是包含在 el-table 下面的 el-table__fixed-right 下面 table 下面的元素 

页面上 “移动fixedLeft“ 选择列右键查看元素, 可以看到 在最上层的元素是 使用的是包含在 el-table 下面的 el-table__fixed 下面 table 下面的元素 

页面上 数据中间列 选择列右键查看元素, 可以看到 在最上层的元素是 使用的是包含在 el-table 下面的 el-table__fixed 下面 table 下面的元素 

然后 我们业务代码中拿到的元素是 数据中间列  

然后 它下面的 draggableClass 的元素在页面上, 不是 z-index 在最上面的元素, 页面的点击, 拖拽等等事件 选中的不是该元素 

const tbody = document.querySelector(".el-table__body-wrapper tbody")

所以 需要更新 Sortable.create 的时候选择的元素 

假设我们需要拖拽 “移动fixedRight” 的元素, 则我们更新 tbody 的 selector 如下 

const tbody = document.querySelector(".el-table__fixed-right tbody")

但是这样会存在一个问题就是, 因为 fixedLeft列 和 数据中间列 和 fixedRight列 是分开的， 然后 我这里将 fixedRight列 的 第二行 和 第一行 交换了位置

但是 fixedLeft列 和 数据中间列 的第二行 和 第一行 是没有交换位置的

这时候 就造成了数据的错位

如下就使 拖拽中, 拖拽之后 的截图, 可以看到的是 第二行的 fixedLeft列 和 数据中间列 的 第二行 和 第一行 是没有交换位置的

造成了数据的展示错误 

所以再这种 el-table 中基于 sortablejs 来实现拖拽的场景下面 

需要尽量避免使用 fixed=”left”, fixed=”right” 的配置, 否则 可能会造成一些 奇怪的问题

完