element ui el-table sorttable实现表格拖拽排序（vuedraggable）-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui el-table sorttable实现表格拖拽排序（vuedraggable）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

npm install sortablejs --save

如果已经安装了 vuedraggable ，则可以不用安装 sortablejs

npm install vuedraggable

element ui el-table sorttable实现表格拖拽排序（vuedraggable）文章来源地址https://www.toymoban.com/news/detail-513640.html

<template>
  <div style="width:800px" class="draggable">
  	// 这里的id需要是tableData数组中存在的，可以换成任意唯一值就行
    <el-table :data="tableData" row-key="id" border align="left">
      <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>
import Sortable from 'sortablejs'
export default {
  data () {
    return {
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎AAA',
          address: '沈阳市普陀区金沙江路2000-1518弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎BBB',
          address: '北京市普陀区金沙江路2020-1618弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎CCC',
          address: '成都市普陀区金沙江路2040-1718弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎DDD',
          address: '天津市普陀区金沙江路2030-1818弄'
        }
      ]
    }
  },
  mounted () {
    this.rowDrop()
  },
  methods: {
    //行拖拽
    rowDrop () {
      const tbody = document.querySelector(
        ".draggable .el-table__body-wrapper tbody"
      );
      console.log(tbody, 'tbody')
      const _this = this
      Sortable.create(tbody, {
        animation: 150,
        draggable: ".draggable .el-table__row",
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          const aa = _this.tableData.splice(newIndex, 0, currRow)
          console.log(aa)
        }
      })
    },
  }
}
</script>
<style scoped>
</style>