Element UI table 顺序拖动

Posted 长不大的大灰狼

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element UI 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 UI table 顺序拖动的主要内容,如果未能解决你的问题,请参考以下文章

解决element-ui table固定列会遮挡住滚动条 ,左右无法拖动

element-ui 实现table整列的拖动

element-ui的table组件,给某些列设置了fixed属性后,滚动条无法拖动

我怎么知道iPad上的分割窗拖动手柄何时出现?

Element-ui上传图片按顺序展示

element-ui table