problem description

use vue + elementUI + sortableJS to implement the column drag function of el-table table. It is found that column drag and drop is implemented, but the table row data will not be updated

the environmental background of the problems and what methods you have tried

vue + elementUI, which is used by the company, recently has a requirement to drag table columns in the el-table component.
after searching on the Internet, I found that it can be realized with SortableJS plus callback processing, and it is also possible to look at the examples on the Internet, so I did it myself.
at the beginning is also OK, column drag and drop after the row data will change accordingly, but in the use of slot-scope= "scope", the column data is no longer updated, at first thought that columnKey is not set, then set useless, and then think that the data is not updated, to the column configuration item added watch, found that the data is changed, but the row data is not changed.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
html section

<div id="app">
  <template>
    
table 1 (drag column and row data changed)
    <el-table border class="tb1" :data="tableData" size="mini" >
      <el-table-column
        v-for="(item, index) in elTheadList"
        :prop="dataTheadList[index]"
        :label="item"
        :key="`thead_${index}`"
       >
      </el-table-column>
    </el-table>
    
table 2 (drag column but row data not changed)
    <el-table border class="tb2" :data="tableData2" size="mini" >
      <el-table-column
        v-for="(item, index) in elTheadList2"
        :prop="dataTheadList2[index]"
        :label="item"
        :key="`thead_${index}`"
       >
         <template slot-scope="scope">
           <template v-if="item == "type"">
             {{scope.row.type | typeFilter}}
           </template>
          <templete v-else>
            {{scope.row[item]}}
          </templete>
        </template>
      </el-table-column>
    </el-table>
  </template>
</div>

Code

var Main = {
  data() {
    return {
      tableData: [{
        date: "2016-05-01",
        name: "Cristian Millan",
        address: "Baja -sharp11"
      },{
        date: "2016-05-02",
        name: "Jorge Cabrera",
        address: "Progreso -sharp18"
      },{
        date: "2016-05-03",
        name: "Armando Mendivil",
        address: "Novena -sharp12"
      }],
      dataTheadList: [
          "date",
        "name",
        "address"
      ],
      elTheadList: ["date", "name", "address"],
      tableData2: [{
        date: "2016-05-01",
        name: "Cristian Millan",
        address: "Baja -sharp11",
        type: 0
      },{
        date: "2016-05-02",
        name: "Jorge Cabrera",
        address: "Progreso -sharp18",
        type: 1
      },{
        date: "2016-05-03",
        name: "Armando Mendivil",
        address: "Novena -sharp12",
        type: 2
      }],
      dataTheadList2: [
          "date",
        "name",
        "address",
        "type"
      ],
      elTheadList2: ["date", "name", "address", "type"]
    }
  },
  mounted() {
   const el = document.querySelector(".tb1 .el-table__header-wrapper tr")
     this.sortable = Sortable.create(el, {
      animation: 180,
      delay: 0,
      onEnd: evt => {
        const oldItem = this.dataTheadList[evt.oldIndex]
        this.dataTheadList.splice(evt.oldIndex, 1)
        this.dataTheadList.splice(evt.newIndex, 0, oldItem)
      }
    })
    
    const el2 = document.querySelector(".tb2 .el-table__header-wrapper tr")
     this.sortable = Sortable.create(el2, {
      animation: 180,
      delay: 0,
      onEnd: evt => {
        const oldItem = this.dataTheadList2[evt.oldIndex]
        this.dataTheadList2.splice(evt.oldIndex, 1)
        this.dataTheadList2.splice(evt.newIndex, 0, oldItem)
      }
    })
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount("-sharpapp")

what result do you expect? What is the error message actually seen?

it is expected that the row data of the second table will be refreshed automatically when the column is dragged. In fact, the second table will not be solved.
attached: online demo:
https://jsfiddle.net/blue86/m...