saas-web/src/components/scFileExport/column.vue

<template>
	<el-table ref="table" :data="columnData" row-key="prop" style="width: 100%" border>
	    <el-table-column prop="" label="排序" width="60">
			<el-tag disable-transitions class="move" style="cursor: move;"><el-icon style="cursor: move;"><el-icon-d-caret/></el-icon></el-tag>
		</el-table-column>
	    <el-table-column prop="label" label="列名">
			<template #default="scope">
				<el-tag round disable-transitions :effect="scope.row.hide?'light':'dark'" :type="scope.row.hide?'info':''">{{ scope.row.label }}</el-tag>
			</template>
		</el-table-column>
	    <el-table-column prop="hide" label="显示" width="60">
			<template #default="scope">
				<el-switch v-model="scope.row.hide" size="small" :active-value="false" :inactive-value="true"/>
			</template>
		</el-table-column>
	  </el-table>
</template>

<script>
	import Sortable from 'sortablejs'

	export default {
		emits: ['success'],
		props: {
			column: { type: Array, default: () => [] }
		},
		data() {
			return {
				columnData: this.column
			}
		},
		mounted() {
			this.rowDrop()
		},
		methods: {
			rowDrop(){
				const _this = this
				const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
				Sortable.create(tbody, {
					handle: ".move",
					animation: 200,
					ghostClass: "ghost",
					onEnd({ newIndex, oldIndex }) {
						const tableData = _this.columnData
						const currRow = tableData.splice(oldIndex, 1)[0]
						tableData.splice(newIndex, 0, currRow)
					}
				})
			}
		}
	}
</script>