表格实现拖拽换位

1.EemenetUi

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

• 引入draggable

import draggable from 'vuedraggable'

• html

• JS

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

• JS

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

3.如果问题请留言

如果问题请留言！！！