效果

使用场景

vue2下自定义表格表头配置: 列排序，显示/隐藏等。确保表头以配置项的形式加载，这样表格才能对修改后的配置作响应

思路

1、表格使用render函数加载(如有疑问可私信)，通过类似如下的columns配置表头

columns: [{ label: '姓名', prop: 'name', width: '160', fixed: true },{ label: '性别', prop: 'sex', align: 'center', width: '160', fixed: false },{ label: '证件类别', prop: 'cardType', align: 'center', width: '160', fixed: false },{ label: '证件号', prop: 'idCard', align: 'center', width: '260', fixed: false },{ label: '手机号', prop: 'mobile', align: 'center', width: '160', fixed: false },{ label: '标签', prop: 'tag', align: 'center', width: '160', fixed: false },{ label: '操作', prop: 'manage', align: 'center', disControl: true },
]

2、通过element-ui 的 el-dropdown 组件完成配置项的展示动作

<el-dropdown trigger="click" :hide-on-click="false"><span class="el-icon-setting" style="font-size: 25px"></span><template slot="dropdown"><el-dropdown-menu><JSelectionItem :arr.sync="rows" @item-click="itemClickHandle"><template v-slot:default="{item,level}"><div class="item-custom">{{item.id}}</div></template><template v-slot:tool="{item,level}"><span class="el-icon-check"v-if="item.visible"style="size: 20px;margin-top: 5px"></span></template></JSelectionItem></el-dropdown-menu></template></el-dropdown>

3、使用vue.draggable 组件完成拖拽效果，具体应用可参考draggable
4、树形结构往往需要递归加载，我选择使用组件递归而非在render中通过js递归去完成配置组件的加载,因为使用render过程中碰到拖拽动画失效的问题，没有思路去解决。

代码

使用树形配置项的组件

<template><div><el-dropdown trigger="click" :hide-on-click="false"><span class="el-icon-setting" style="font-size: 25px"></span><template slot="dropdown"><el-dropdown-menu><JSelectionItem :arr.sync="rows" @item-click="itemClickHandle"><template v-slot:default="{item,level}"><div class="item-custom">{{item.id}}</div></template><template v-slot:tool="{item,level}"><span class="el-icon-check"v-if="item.visible"style="size: 20px;margin-top: 5px"></span></template></JSelectionItem></el-dropdown-menu></template></el-dropdown></div>
</template><script>
import JSelectionItem from "./JSelectionItem";export default {name: "JHeadManage",components: {  JSelectionItem },data() {return {rows: []}},created() {this.getResource()},methods: {itemClickHandle(item) {item.visible = !item.visibleconsole.log(item)},getResource() {const vm = this//测试用数据只有一个根节点 "0" 方便构建测试用数据树const data = [{ id: '1', parentId: '0' },{ id: '2', parentId: '0' },{ id: '2-0', parentId: '2' },{ id: '1-0', parentId: '1' },{ id: '1-1', parentId: '1' },{ id: '1-1-0', parentId: '1-1' },{ id: '1-1-0-0', parentId: '1-1-0' },{ id: '1-1-0-1', parentId: '1-1-0' },{ id: '1-2', parentId: '1' },{ id: '1-2-0', parentId: '1-2' },{ id: '1-2-1', parentId: '1-2' },]//1) 简单处理数据用于自定义渲染; checked:  indeterminate:data.forEach((d, index) => {d.visible = true //是否选中d.isIndeterminate = false//是否是半选状态d.a = 'a' + index})vm.rows = vm.makeTree(data, 'id', 'parentId', '0')// vm.rows = data},/*** 构建树,与复选逻辑无关* @param data* @param idMark* @param pIdMark* @param rootId* @returns {*}*/makeTree(data, idMark, pIdMark, rootId) {//转化为字典，id为键值，并添加根节点对象let nodeDict = {};(nodeDict[rootId] = { children: [] })[idMark] = rootId;data.forEach(n => (nodeDict[n[idMark]] = n).children = []);data.forEach(d => nodeDict[d[pIdMark]]?.children?.push(d))return nodeDict[rootId].children;}}
}
</script><style scoped>.item-custom {display: inline-flex;padding: 10px 0;margin-right: auto;}</style>

树型配置项组件

定义了两个插槽，一个用来显示主要内容一个用来放置对选项的操作

<template><ul class="list" :style="{paddingLeft:level==0?'10px':'0'}"><draggable v-model="locArr":animation="100"handle=".tip"@start="onStart"@end="onEnd"><transition-group><li class="item" v-for="(c,i) in locArr" :key="i"><div class="item-inner" :style="{paddingLeft:level*20+'px'}" @click.stop="itemClick(c)"><span class="tip el-icon-more-outline"></span><slot v-bind:item="c" v-bind:level="level"></slot><div class="item-tool"><slot name="tool" v-bind:item="c" v-bind:level="level"></slot></div></div><template v-if="c.children&&c.children.length>0"><JSelectionItem :arr.sync="c.children" :level="level+1" @item-click="itemClick"><template v-slot:default="{item,level}"><slot v-bind:item="item" v-bind:level="level"></slot></template><template v-slot:tool="{item,level}"><slot name="tool" v-bind:item="item" v-bind:level="level"></slot></template></JSelectionItem></template></li></transition-group></draggable></ul>
</template><script>
import draggable from 'vuedraggable'
import JSelectionItem from "@/views/demo/JSelectionItem";export default {name: "JSelectionItem",components: {JSelectionItem, draggable},data() {return {}},computed: {locArr: {get() {return this.arr},set(val) {this.$emit('update:arr', val)}},},props: {arr: {type: Array,default: () => []},level: {type: Number,default: 0,}},methods: {onStart() {},onEnd() {},itemClick(item) {this.$emit('item-click', item)}}
}
</script><style scoped>.list {width: 100%;margin: 0;padding: 0;}.item {padding: 0;width: 100%;display: flex;flex-wrap: wrap;align-items: center;}.item-inner {display: flex;width: 100%;position: relative;justify-content: space-between;border-bottom: 1px solid #e5e5e5;user-select: none;}.item-inner:hover {/*font-weight: bold;*/}.item-tool {display: flex;position: absolute;align-items: center;right: 10px;}.tip {transform: rotate(-90deg);cursor: move;font-size: 20px;user-select: none;}</style>