vue项目element框架 表格el-table 进行拖动排序

效果:

拖动效果

基于一个插件实现的  

npm i vuedraggable

方法：

<template>
  <div style="width:800px" class="draggable">
  	<!-- // 这里的id需要是tableData数组中存在的，可以换成任意唯一值就行 -->
    <el-table :data="tableData" row-key="id" border align="left">
      <el-table-column type="index" label="序号" width="180">
      </el-table-column>
      <el-table-column prop="id" label="id" width="180">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script> 
data () {
    return {
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎AAA',
          index:0,
          address: '沈阳市普陀区金沙江路2000-1518弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎BBB',
          index:0,
          address: '北京市普陀区金沙江路2020-1618弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎CCC',
          index:0,
          address: '成都市普陀区金沙江路2040-1718弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎DDD',
          index:0,
          address: '天津市普陀区金沙江路2030-1818弄'
        }
      ]
    }
  },
mounted () {
    this.rowDrop()
},
methods: {
    rowDrop () {
		 const tbody = document.querySelector(".draggable tbody");
		 const _this = this
		 Sortable.create(tbody, {
			animation: 150,
			draggable: ".draggable .el-table__row",
			onEnd ({ newIndex, oldIndex }) {
				//1.将要排序的数据 拷贝一份
				const list = _this.inputForm.proScheduleDTOList.slice()
				//2. 通过拷贝的数据 进行排序
				const currRow = list.splice(oldIndex, 1)[0]
				list.splice(newIndex, 0, currRow)
				list.forEach((item, index) => {
					item.sequence = index + 1
				})
				//3.将源数据清空
				_this.inputForm.proScheduleDTOList = []
				//4.通过 $nextTick 的方式从新更新视图
				_this.$nextTick(function (){
					_this.inputForm.proScheduleDTOList = list
				})
			   }
		    })
	  },
}
</script>