需求背景

在日常開發(fā)中，我們會(huì)遇見很多不同的業(yè)務(wù)需求。如果讓你用element-ui實(shí)現(xiàn)一個(gè) tree-select 組件，你會(huì)怎么做？

這個(gè)組件在 element-plus 中是有這個(gè)組件存在的，但是在 element-ui 中是沒有的。

可能你會(huì)直接使用 element-plus 組件庫(kù)，或者其他組件庫(kù)。但是若你的項(xiàng)目目前的基于vue2和element-ui進(jìn)行開發(fā)的呢？

下面這種思路利用 el-tree 和 el-select 進(jìn)行嵌套從而實(shí)現(xiàn)我們想要的 tree-select 組件

最終效果

大致思路：

el-select和el-tree進(jìn)行嵌套，將el-tree放到el-option里，循環(huán)遍歷el-option，同時(shí)定義一個(gè)方法比如：formatData，對(duì)樹形數(shù)據(jù)進(jìn)行遞歸處理，這樣就可以實(shí)現(xiàn)無(wú)論嵌套的層級(jí)有幾層都可以正常渲染在界面上
利用 v-model 和 update:selectValue 實(shí)現(xiàn)父子組件之間的雙向通信，同時(shí)利用computed進(jìn)行監(jiān)聽以實(shí)現(xiàn)實(shí)時(shí)更新

組件中的 v-model

我們?cè)?strong>input中可以使用v-model來(lái)完成雙向綁定：

• ? 這個(gè)時(shí)候往往會(huì)非常方便，因?yàn)関-model默認(rèn)會(huì)幫助我們完成兩件事：
• ? v-bind:value的數(shù)據(jù)綁定和@input的事件監(jiān)聽；

如果我們現(xiàn)在封裝了一個(gè)組件，其他地方在使用這個(gè)組件時(shí)，是否也可以使用v-model來(lái)同時(shí)完成這兩個(gè)功能呢？

當(dāng)我們?cè)诮M件上使用的時(shí)候，等價(jià)于如下的操作：

• ? 我們會(huì)發(fā)現(xiàn)和input元素不同的只是屬性的名稱和事件觸發(fā)的名稱而已；

如果我們希望綁定多個(gè)屬性呢？

• ? 也就是我們希望在一個(gè)組件上使用多個(gè)v-model是否可以實(shí)現(xiàn)呢？
• ? 我們知道，默認(rèn)情況下的v-model其實(shí)是綁定了 modelValue 屬性和 @update:modelValue的事件；
• ? 如果我們希望綁定更多，可以給v-model傳入一個(gè)參數(shù)，那么這個(gè)參數(shù)的名稱就是我們綁定屬性的名稱；
• 

實(shí)現(xiàn)代碼示例

子組件：

<template><div><h4>Counter: {{modelValue}}</h4><button @click="changeCounter">修改數(shù)據(jù)</button></div>
</template><script>
export default {props: {modelValue:  {type: Number},},emits: ['update:modelValue'],methods: {changeCounter(){this.$emit('update:modelValue',101)}}
}
</script>

父組件：

<template><!-- <child v-model="appCounter" /> --><!-- 等同于如下做法：modelValue--默認(rèn)可以自定義名稱，通過(guò) v-model:counter 類似于這種格式--><child :modelValue="appCounter" @update:modelValue="appCounter = $event" />
</template><script>
import child from '@/components/child.vue'
export default {components: {child},data() {return {appCounter: 100,};},methods: {},
};
</script>

有了上面的知識(shí)，那么下面實(shí)現(xiàn)就很簡(jiǎn)單了，這里直接上代碼?

組件封裝

子組件：TreeSelect.vue

<template><div class="app-container" style="padding: 0"><el-selectclass="main-select-tree"ref="selectTree"v-model="value"style="width: 240px"clearable@clear="clearSelectInput"><el-inputstyle="width: 220px; margin-left: 10px; margin-bottom: 10px"placeholder="輸入關(guān)鍵字進(jìn)行過(guò)濾"v-model="filterText"clearable></el-input><el-optionv-for="item in formatData(data)":key="item.value":label="item.label":value="item.value"style="display: none"/><el-treeclass="main-select-el-tree"ref="selecteltree":data="data"node-key="id"highlight-current:props="defaultProps"@node-click="handleNodeClick":current-node-key="value":expand-on-click-node="true"default-expand-all:filter-node-method="filterNode"/></el-select></div>
</template><script>
export default {props: {selectValue: {type: String,default: "",},},data() {return {filterText: "",value: "",data: [{id: 1,label: "云南",children: [{id: 2,label: "昆明",children: [{id: 3,label: "五華區(qū)",children: [{id: 8,label: "xx街道",children: [{id: 81,label: "yy社區(qū)",children: [{ id: 82, label: "北辰小區(qū)" }],},],},],},{ id: 4, label: "盤龍區(qū)" },],},],},{id: 5,label: "湖南",children: [{ id: 6, label: "長(zhǎng)沙" },{ id: 7, label: "永州" },],},{id: 12,label: "重慶",children: [{ id: 10, label: "渝北" },{ id: 9, label: "合川" },],},{id: 13,label: "江蘇",children: [{ id: 14, label: "鹽城" }],},],defaultProps: {children: "children",label: "label",},};},watch: {filterText(val) {this.$refs.selecteltree.filter(val);},},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 遞歸遍歷數(shù)據(jù)formatData(data) {let options = [];const formatDataRecursive = (data) => {data.forEach((item) => {options.push({ label: item.label, value: item.id });if (item.children && item.children.length > 0) {formatDataRecursive(item.children);}});};formatDataRecursive(data);return options;},// 點(diǎn)擊事件handleNodeClick(node) {this.value = node.id;this.$refs.selectTree.blur();this.$emit('update:selectValue', node.label);},// 清空事件clearSelectInput() {this.$emit('update:selectValue', '');// 獲取 el-tree 實(shí)例的引用const elTree = this.$refs.selecteltree;// 將當(dāng)前選中的節(jié)點(diǎn)設(shè)置為 nullelTree.setCurrentKey(null);},},
};
</script><style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {font-weight: bold;color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {font-weight: bold;color: #409eff;
}
</style>

使用方式

<TreeSelect v-model="selectedValue" @update:selectValue="handleSelectValueChange"></TreeSelect><el-button size="medium" :disabled="todoIsTotal">交接當(dāng)前{{ tableData.length }}條任務(wù)</el-button>import TreeSelect from "./TreeSelect.vue";export default {components: {TreeSelect,},data() {selectedValue: "",},computed: {todoIsTotal() {return this.selectedValue === "";},},methods: {handleSelectValueChange(value) {if (value && value.length > 0) {this.selectedValue = value;} else {this.selectedValue = "";}},},
}