关于Element UI table 顺序拖动方式

目录 Element UI table 顺序拖动 基本使用 element关于table拖拽排序问题

Element UI table 顺序拖动

使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。

new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

官网：

[1] Sortable.js官网配置项说明等

[2] Sortable更多使用示例

基本使用

1、安装

npm install sortablejs --save

2、引用

import Sortable from 'sortablejs'

3、使用

    <el-table
      id="table"
      :data="list"
      row-key="id"
      style="width: 500px"
    >
      <el-table-column
        prop="name"
        label="称"
        width="180"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="handle"
            size="mini"
          ><i class="el-icon-rank" /> 移动</el-button>
        </template>
      </el-table-column>
    </el-table>

<script>
  // 引用 Sortable
  import Sortable from 'sortablejs'
  export default {
    data() {
      return {
        list: []
      }
    },
    mounted() {
      this.rowDrop();
    },
    methods: {
      //行拖拽,排序方法
      rowDrop() {
      // 获取对象
        const el = document.querySelector('#ability-table .el-table__body-wrapper tbody')
        const self = this
	  // 配置
	    var ops = {
          handle: ".handle",
          onEnd({ newIndex, oldIndex }) {
            self.list.splice(newIndex, 0, self.list.splice(oldIndex, 1)[0])
            const newArray = self.list.slice(0)
            newArray.forEach((value, index) => {
            value.orderNum = index + 1 //序号为index+1
            self.$set(newArray, index, value)
	       
	        self.list= [] //
	        self.$nextTick(() => {
	          self.list= newArray ? newArray : []
	        })
		}
        Sortable.create(el,ops)
      },
    }
</script>

说明：

orderNum ：为排序号

handle ： 使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动

Array.splice() 方法有三个参数：

index ：规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany ：要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX ：向数组添加的新项目。

注意：

newArray = Array.splice(0): 表示将原数组赋给新数组，并将原数组清空。 要在el-table渲染后调用 this.rowDrop(); 方法 组件绑定是根据Id绑定的：document.querySelector('#ability-table .el-table__body-wrapper tbody')，要注意父组件Id和子组件Id不要重名，否则会优先绑定到父组件对应的Id元素。

element关于table拖拽排序问题

最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法

//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
? ? <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
? ? ? //设置sortable属性时出现排序按钮
? ? ? <el-table-column prop="ID" label="座号" sortable>
? ? </el-table>

但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能

sortablejs GitHub地址

//sortablejs ? ? GitHub地址
https://github.com/SortableJS/Sortable#readme

//安装sortable.js
Install with NPM:
$ npm install sortablejs --save
//在组件内引入
import Sortable from 'sortablejs'
//为需要拖拽排序的表格添加ref属性
<el-table ?ref="dragTable">
//在数据渲染完毕添加拖拽事件
created(){
? ?this.getBanner()
},
methods:{
?? ?async getBanner(val){
? ? ? ? ? await apiGetBanner().then((res)=>{
? ? ? ? ? ? ? ?this.bannerTable = res.data.data;
? ? ? ? ? })
? ? ? ? ?this.oldList = this.bannerTable.map(v => v.id);
? ? ? ? ?this.newList = this.oldList.slice();
? ? ? ? ?this.$nextTick(() => {
? ? ? ? ? ? ?this.setSort() ?//数据渲染完毕执行方法
? ? ? ? ?})
? ? }
? ? setSort() {
? ? ? ? const el = this.$refs.dragTable.$el.querySelectorAll(
? ? ? ? ?? ??? ?'.el-table__body-wrapper > table > tbody'
? ? ? ? )[0];
? ? ? ? this.sortable = Sortable.create(el, {
? ? ? ? ?? ?// Class name for the drop placeholder,
? ? ? ? ?? ??? ?ghostClass: 'sortable-ghost',?
? ? ? ? ? ? ? ? setData: function(dataTransfer) {
? ? ? ? ? ? ? ? dataTransfer.setData('Text', '')
? ? ? ? ? ? },
? ? ? ? ? ?//拖拽结束执行,evt执向拖拽的参数
? ? ? ? ? ?onEnd: evt => {
? ? ? ? ? ? ? //判断是否重新排序
? ? ? ? ? ? ? if(evt.oldIndex !== evt.newIndex){
? ? ? ? ? ? ? ? ? let data = {
? ? ? ? ? ? ? ? ? ? ?id:this.bannerTable[evt.oldIndex].id,
? ? ? ? ? ? ? ? ? ? ?banner_order:evt.newIndex
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? //数据提交失败则恢复旧的排序
? ? ? ? ? ? ? ? ? apiPutBanner(data).catch(()=>{
? ? ? ? ? ? ? ? ? ? ?const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
? ? ? ? ? ? ? ? ? ? ?this.bannerTable.splice(evt.newIndex, 0, targetRow);
? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? }
}

如果需要列拖拽的话，可以参考下面的代码，和上面是一样的原理，在这里我就不赘述了

//行拖拽
? ? rowDrop() {
? ? ? const tbody = document.querySelector('.el-table__body-wrapper tbody')
? ? ? const _this = this
? ? ? Sortable.create(tbody, {
? ? ? ? onEnd({ newIndex, oldIndex }) {
? ? ? ? ? const currRow = _this.tableData.splice(oldIndex, 1)[0]
? ? ? ? ? _this.tableData.splice(newIndex, 0, currRow)
? ? ? ? }
? ? ? })
? ? },
? ? //列拖拽
? ? 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)
? ? ? ? }
? ? ? })
? ? }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于关于Element UI table 顺序拖动方式的详细内容...