Element UI 表格拖拽行，列

最新推荐文章于 2024-08-01 09:53:22 发布

月亮和我

最新推荐文章于 2024-08-01 09:53:22 发布

阅读量761

点赞数

分类专栏： vue JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44356010/article/details/125168122

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

Element UI 表格拖拽行，列

需要用到插件 sortablejs ，在项目中安装，引入到需要的页面，或者在main.js进行全局注册
表格上面一定要写上row-key=“id”

<template>
	<el-table :data="tableData" border row-key="id" align="left">
	      <el-table-column prop="name" label="姓名" />
	</el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
	data(){
		return{
			tableData: [
			        {
			          id: '1',
			          name: '王小虎1'
			        },
			        {
			          id: '2',
			          name: '王小虎2'
			        },
			        {
			          id: '3',
			          date: '2016-05-01',
			          name: '王小虎3'
			        },
			        {
			          id: '4',
			          name: '王小虎4'
			        }
      		]
		}
	},
	mounted() {
	    this.rowDrop()
	},
	methods: {
    	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)
	        }
	      })
    	}
  	}
}
</script>