vue+elementUI+sortable实现表格行拖拽功能

1. 安装
   

2. 引入
   

3. 使用

整个表格行都可拖动的Js实现

rowDrop() {
      const _this = this;
      const tbody = document.querySelector(".el-table__body-wrapper tbody ");
      Sortable.create(tbody, {
        disabled: false, // 拖拽不可用? false 启用
        ghostClass: "sortable-ghost", //拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
//请求接口
          UPDictionariesOrder(_this.tableData).then((res) => {
            _this.onSubmit();
          });
        },
      });
    },

满足条件的行可拖拽
给表格添加row-class-name属性来为 Table 中的某一行添加 class