Vue通过slot实现table列显隐、顺序重排

背景

表格封装一般基于Element UI，通过JSON定义每列属性，实现对每列的自定义操作。但如此一来，过于庞大的JSON数据会难以维护，通过对slot进行二次处理，可以更加灵活的实现表格的封装

代码示例

<template>
	<div class="layout-content">
		<el-card style="width: 880px">
			<template #header>
				<div class="card-header">
					<span>Card name</span>
					<el-icon style="float: right; cursor: pointer;">
						<Setting />
					</el-icon>
				</div>
			</template>
			<v-table :data="tableData" style="width: 100%">
				<el-table-column fixed prop="date" label="Date" width="150" />
				<el-table-column prop="name" label="Name" width="120" />
				<el-table-column prop="state" label="State" width="120" />
				<el-table-column prop="city" label="City" width="120" />
				<el-table-column prop="address" label="Address" width="600" />
				<el-table-column prop="zip" label="Zip" width="120" />
				<el-table-column fixed="right" label="Operations" min-width="120">
					<template #default>
						<el-button link type="primary" size="small">
							Detail
						</el-button>
						<el-button link type="primary" size="small">Edit</el-button>
					</template>
				</el-table-column>
			</v-table>
		</el-card>
	</div>
</template>
<script>
import VTable from './components/VTable.vue'
import { Setting } from '@element-plus/icons-vue'
export default {
	name: 'App',
	components: { VTable, Setting },
	data() {
		return {
			tableData: [
				{
					date: '2016-05-03',
					name: 'Tom',
					state: 'California',
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
					tag: 'Home',
				},
				{
					date: '2016-05-02',
					name: 'Tom',
					state: 'California',
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
					tag: 'Office',
				},
				{
					date: '2016-05-04',
					name: 'Tom',
					state: 'California',
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
					tag: 'Home',
				},
				{
					date: '2016-05-01',
					name: 'Tom',
					state: 'California',
					city: 'Los Angeles',
					address: 'No. 189, Grove St, Los Angeles',
					zip: 'CA 90036',
					tag: 'Office',
				},
			]
		}
	}
}
</script>
<style lang="scss">
.layout-content {
	padding: 15px;
}
</style>

<script lang="jsx">
export default {
    data() {
        return {}
    },
    render() {
        // 获取默认插槽的VNode列表
        let vNodes = this.$slots.default()
        return (
            <el-table ref="table" {...this.$attrs}>
                {vNodes}
            </el-table>
        )
    }
}
</script>

有了vNodes后，你可以做

1. 列排序，可以借助vue-draggable-resizable实现拖拽排序；
2. 列显隐，仅需做一次filter即可;
3. 下载，获取列数据，做简单处理，即可作为表格下载的表头数据；