vue使用sortablejs插件的时候报Sortable: `el` must be an HTMLElement

最近因为项目需要很灵活自定义查询，故使用了vue和element-ui组件库，其中el-table需要行和列拖拽排序。故使用到了sortable插件。

一、报错的排查

首先对：

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

console.log(tbody)
发现为null,所以就知道肯定el-table还没有执行完就来跑这段代码了。我设计的页面主要是后台数据驱动的使用到了v-if判断。当v-if还不起作用的时候里面的样式是没有的。

二、解决方案

等数据加载完后再进行sortable方法的调用，代码如下:

//行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const selft = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          let tData = JSON.parse(JSON.stringify(selft.tableData));
          const currRow = tData.splice(oldIndex, 1)[0];
          tData.splice(newIndex, 0, currRow);
          selft.tableData = [];
          setTimeout(() => {
            selft.tableData = tData;
          }, 5);
        }
      });
    },
    //列拖拽
    columnDrop() {
      let selft = this;
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          let item = JSON.parse(
            JSON.stringify(selft.elTabPanes[selft.activeTab].clcheckedCities)
          );
          const oldItem = item[evt.oldIndex - 2];
          item.splice(evt.oldIndex - 2, 1);
          item.splice(evt.newIndex - 2, 0, oldItem);

          selft.elTabPanes[selft.activeTab].clcheckedCities = [];
          setTimeout(() => {
            selft.elTabPanes[selft.activeTab].clcheckedCities = item;
          }, 5);
        }
      });
    },

这里用到了给原来的变量赋值空，在settimeout赋值，解决了拖拽的时候实际的数据改变了，但是现实没有改变的问题。还有如果你的table是动态的，那么没事加载完数据，就要娶加载一次。否则拖拽不起作用。

三、总结

1、npm install sortable.js --save引入包；
2、el-table要加row-key="id"属性；

参考：https://www.jianshu.com/p/362f880d0bfd