sortablejs 数据源修改后对象数据不同步问题修复

遇到个问题，编辑信息时获取来的数据未做任何改动直接保存，sortable的实例对象为空，

解决办法，手动set一下

setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
      let _this = this;
      this.sortObj = Sortable.create(el, {
        group: "sort-table",
        animation: 150,
        ghostClass: 'blue-background-class',
        dataIdAttr: 'class',
        store: {
          get: function (sortable) {
            var order = localStorage.getItem(sortable.options.group.name);
            return order ? order.split('|') : [];
          },
          set: function (sortable) {
            // 这里是获取新的排序数组，这里这里！！！！！！！！！
            var order = sortable.toArray();
            localStorage.setItem(sortable.options.group.name, order.join('|'));
          }
        },
        onEnd({ newIndex, oldIndex }) {
          // let arr = _this.localServicesList;
          // const currRow = _this.localServicesList.splice(oldIndex, 1)[0];
          // _this.localServicesList.splice(newIndex, 0, currRow);
          // _this.$set(_this.$data, 'localServicesList', _this.localServicesList);
        },
        onRemove(evt) {
          
        }
      });
    },


// 在数据保存时，若未进行过拖拽行为，可能会let sortArr = localStorage.getItem('sort-table')为空，  手动调用一下store的set方法
this.sortObj.options.store.set(me.sortObj)// this.sortObj是对象实例
let sortArr = localStorage.getItem('sort-table');
let idxs = [];
if(sortArr) {
    sortArr = sortArr.split('|');
    let rst = null;
    sortArr.map(item => {
        rst = item.split(' ').filter(el => el.indexOf('id_')>-1)[0];
        idxs.push(rst.substring(3))
    })
} else {
}

这样就能拿到数据了

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

遇到的第二个问题：切换数据源时，第一次create的数据未更新

解决办法：

if(this.sortObj) {

    this.sortObj.destroy()

}
this.setSort();// 定义见上图?

有疑问可留言