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();// 定義見上圖👆

有疑問可留言