表格实现拖拽换位_vue2 element ui表格同级拖拽可以交换位置-优快云博客

本文链接：https://blog.youkuaiyun.com/Genius_cxx/article/details/103309836

本文介绍了如何在Element UI和IView UI的表格组件中实现拖拽排序功能，通过使用vuedraggable和Sortable库，详细展示了HTML结构、JavaScript代码以及事件处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.EemenetUi

https://element.eleme.cn/#/zh-CN/component/table

引入draggable


import draggable from 'vuedraggable'

html

<el-table
      id="otable"
      :data="tableData"
      border
      row-key="id"
      align="left"
      height="70%"
    >
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
</<el-table>

export default {
  data() {
	 col: [
	        {
	          label: 'ID',
	          prop: 'id'
	        }
	      ],
	      dropCol: [
	        {
	          label: 'ID',
	          prop: 'id'
	        }
	      ],
	   },
	  methods:{
	  	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)
        }
      })
    }
	}
}

2.IviewUi

https://www.iviewui.com/components/table

HTML

<Table
        border
        :columns="columns"
        :data="data"
        :loading="loading"
        height="550"
        draggable
        @on-drag-drop="drag"
        v-show="show"
      >
        <template slot-scope="{ row }" slot="thumb">
          <img :src="row.thumb" style="width:60px;padding:5px;height:80px" />
        </template>
</Table>

methods:{
	drag(a, b) {
      this.data.splice(b, 1, ...this.data.splice(a, 1, this.data[b]));
    },
}

3.如果问题请留言

如果问题请留言！！！