npm install sortablejs --save

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

npm install vuedraggable

在这里插入图片描述

<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>
Logo

前往低代码交流专区

更多推荐