vue基于element-table表格拖拽排序

Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

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

vuejs:

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Sortable.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:function(){
			return {
				col:[
					{
						label:'日期',
						prop:'date'
					},{
						label:'姓名',
						prop:'name'
					},{
						label:'地址',
						prop:'address'
					},
				],
				dropCol:[
					{
						label:'日期',
						prop:'date'
					},
					{
						label:'姓名',
						prop:'name'
					},{
						label:'地址',
						prop:'address'
					}
				],
				tableData:[
					{
						id:'1',
						date:'2021-05-01',
						name:'王小虎1',
						address:'上海市普陀区金沙江路 101 弄'
					},
					{
						id:'2',
						date:'2021-05-02',
						name:'王小虎2',
						address:'上海市普陀区金沙江路 102 弄'
					},
					{
						id:'3',
						date:'2021-05-03',
						name:'王小虎3',
						address:'上海市普陀区金沙江路 103 弄'
					},
					{
						id:'4',
						date:'2021-05-04',
						name:'王小虎4',
						address:'上海市普陀区金沙江路 104 弄'
					}
				]
			}
		},
		mounted:function(){
			this.rowDrop();
			this.columnDrop();
		},
		methods:{
			// 行拖拽
			rowDrop:function(){
				
			},
			// 列拖拽
			columnDrop:function(){
				
			}
		}
	})
</script>

html:

<div id="app">
	<div class="table-wrap">
		<div class="table-box">
			<el-table :data="tableData" border stripe row-key="id" align="left">
				<el-table-column v-for="(item,index) in col"
					:key="`col_${index}`"
					:prop="dropCol[index].prop"
					:label="item.label">
				</el-table-column>
			</el-table>
		</div>
	</div>
</div>

给表格设置固定宽度，css样式，设置如下所示：

<style type="text/css">
	.table-wrap{
		width: 900px;
		margin: 0 auto;
	}
	.table-box{
		width: 800px;
		margin: 0 auto;
	}
</style>

预览效果，如下所示：