效果

使用場(chǎng)景

vue2下自定義表格表頭配置: 列排序，顯示/隱藏等。確保表頭以配置項(xiàng)的形式加載，這樣表格才能對(duì)修改后的配置作響應(yīng)

思路

1、表格使用render函數(shù)加載(如有疑問可私信)，通過類似如下的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: '證件號(hào)', prop: 'idCard', align: 'center', width: '260', fixed: false },{ label: '手機(jī)號(hào)', prop: 'mobile', align: 'center', width: '160', fixed: false },{ label: '標(biāo)簽', prop: 'tag', align: 'center', width: '160', fixed: false },{ label: '操作', prop: 'manage', align: 'center', disControl: true }, ]

2、通過element-ui 的 el-dropdown 組件完成配置項(xiàng)的展示動(dòng)作

<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 組件完成拖拽效果，具體應(yīng)用可參考draggable
4、樹形結(jié)構(gòu)往往需要遞歸加載，我選擇使用組件遞歸而非在render中通過js遞歸去完成配置組件的加載,因?yàn)槭褂胷ender過程中碰到拖拽動(dòng)畫失效的問題，沒有思路去解決。

代碼

使用樹形配置項(xiàng)的組件

<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//測(cè)試用數(shù)據(jù)只有一個(gè)根節(jié)點(diǎn) "0" 方便構(gòu)建測(cè)試用數(shù)據(jù)樹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) 簡(jiǎn)單處理數(shù)據(jù)用于自定義渲染; checked: indeterminate:data.forEach((d, index) => {d.visible = true //是否選中d.isIndeterminate = false//是否是半選狀態(tài)d.a = 'a' + index})vm.rows = vm.makeTree(data, 'id', 'parentId', '0')// vm.rows = data},/*** 構(gòu)建樹,與復(fù)選邏輯無關(guān)* @param data* @param idMark* @param pIdMark* @param rootId* @returns {*}*/makeTree(data, idMark, pIdMark, rootId) {//轉(zhuǎn)化為字典，id為鍵值，并添加根節(jié)點(diǎn)對(duì)象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>

樹型配置項(xiàng)組件

定義了兩個(gè)插槽，一個(gè)用來顯示主要內(nèi)容一個(gè)用來放置對(duì)選項(xiàng)的操作

<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>

總結(jié)

以上是生活随笔為你收集整理的树形可拖拽排序配置组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。