vue2+element-ui 记录8

element-ui table 表格的列显示/隐藏、列拖动、列的宽度拖动数据保存 3（仅适用于新手）

1.前一章说了表格的列的显示/隐藏，这次说用sortablejs插件实现拖动列改变列的顺序。首先我们要先安装sortablejs插件，终端输入命令npm install sortablejs --save，回车运行，成功后，再在组件TableSet中先引入sortablejs插件， 然后增加一个拖拽的方法，代码如下（${that.tbId}，是为了通用的时候每个组件独立）：
注意：
1.初始化columnDrop方法的时候最好放到定时器里面，等页面加载成功后才有下面的el对象，不然会报找不到el的错；
2.记得导入sortablejs插件，我这里没有写出来；

created() {
  let that = this;

  setTimeout(() => { that.columnDrop(); }, 500);
},
methods:{
  /** 列拖拽 */
  columnDrop() {
    let that = this;

    let el = document.querySelector(`.${that.tbId} .tb-cols .col-items`);
    Sortable.create(el, {
      ghostClass: 'sortable-ghost',
      onEnd: evt => {
          // 根据下标，先删除移动对象
          let targetRow = that.fields.splice(evt.oldIndex, 1)[0];
          // 再将移动对象添加至新下标处，注意：此处要用splice方法，不然watch中的fields字段监听不到数据对象里面的数据变化了
          that.fields.splice(evt.newIndex, 0, targetRow);
      }
    });
  },
},

页面代码有一点小小的改动，如下图：

2.UserList表格组件有点小改动，但很重要，如下图所示：

这里要用index作为key，这样当拖动排序的时候才能被v-for检测到，不然不生效，可以换成其他作为key试一试，例如field（之前我就是用这个，检查了好一会儿）；
最终效果图如下图：

注意
1.这次写得比较简单，如有不懂的新手可以留言讨论；
2.网上有很多列的拖动是在表格上面直接拖动列（其实最初我也是在列上面直接拖动，但是后面因为列的显示/隐藏引起了拖动错位等问题，最后选择了这样的方式，但现在看来，也可以直接在列上面实现拖动）；
3.表格的显示/隐藏、拖动排序基本就讲完了，后面主要说一下列的宽度拖动保存数据，保存设置的数据到缓存（或者数据库）、TableSet组件的通用，在其他列表中怎么使用、选择行数据的通用（不用每个页面都写行的选择方法、展开的选择方法）；

活到老，学到老，学无止尽！欢迎大家相互讨论，相互学习！不喜勿喷！