拖拽排序（el-table）

博主：茶白
发布时间：2022 年 08 月 06 日
暂无评论
5549字数
分类： vue JavaScript html

一：表格的拖拽排序

方法：使用sortableJs插件实现拖拽排序

1：使用npm安装sortableJs插件

```css
npm install sortablejs --save
```

2：在需要使用的页面进行引入

```javascript
import Sortable from 'sortablejs'//引入插件
```

3：实现表格的行拖拽排序完整代码

注意：此处只是对表格的行实现的拖拽排序，若要实现列的拖拽排序请往下看

```html
<template>
  <div style="width:800px">
    <el-table :data="tableData"
      border
      row-key="id"
      align="left">
     <el-table-column 
        prop="date"
        label="日期"> 
      </el-table-column>
      <el-table-column 
        prop="name"
        label="姓名"> 
      </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: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
    // 阻止默认行为
	  document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.rowDrop()//行拖拽
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex == oldIndex) return
          _this.tableData.splice(
            newIndex,
            0,
            _this.tableData.splice(oldIndex, 1)[0]
          )
          var newArray = _this.tableData.slice(0)
          _this.tableData = []
          _this.$nextTick(function () {
            _this.tableData = newArray
          })
        }
      })
    },
  
  }
}
</script>
```

实现表格的行列同时拖拽排序

```html
<template>
  <div style="width:800px">
    <el-table :data="tableData" border>
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Sortable from 'sortablejs'//引入插件
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
    // 阻止默认行为
	  document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.rowDrop()//行拖拽
    this.columnDrop()//列拖拽
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex == oldIndex) return
          _this.tableData.splice(
            newIndex,
            0,
            _this.tableData.splice(oldIndex, 1)[0]
          )
          var newArray = _this.tableData.slice(0)
          _this.tableData = []
          _this.$nextTick(function () {
            _this.tableData = newArray
          })
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>
```

二：列表的拖拽排序

列表拖拽排序一般只用在行的拖拽排序，此处我们依旧可以使用sortableJs来实现拖拽排序的功能，具体代码如下

```html
<template>
  <div style="width:800px">
    <ul id="items">
      <li v-for="item in listData" :key="item.id">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>
<script>
import Sortable from 'sortablejs'//引入插件
export default {
  data() {
    return {
      listData:[
        {
          id:1,
          name:'数据一'
        },
        {
          id:2,
          name:'数据二'
        },
        {
          id:3,
          name:'数据三'
        },
        {
          id:4,
          name:'数据四'
        }
      ]
    }
  },
  mounted() {
    // 阻止默认行为
	  document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.rowDrop()//行拖拽
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.getElementById('items')
      const that = this
      Sortable.create(tbody, {
        onEnd: function (evt) {
         // 获取排序之后的data数据
          that.listData.splice(evt.newIndex, 0, that.listData.splice(evt.oldIndex, 1)[0])
          var newArray = that.listData.slice(0)
          that.listData = []
          that.$nextTick(function () {
            that.listData = newArray
          })
        }
      })
    },
  
  }
}
</script>
```

> 注意 : 动态数据要放在数据加载完成后在调用

最后修改：2022 年 08 月 06 日