業(yè)務(wù)需求: 可以從下拉框中選擇數(shù)據(jù)，也可以自定義搜索。
前端效果：
1：從下拉框中選擇

2：自定義搜索

3：單選并賦值：也就是選中那個就回顯那個

代碼實現(xiàn)：
1.首先需要用到select控件和tree控件，在select控件中嵌套tree控件。
2.開啟select控件的搜索功能，也就是filterable，然后需要自定義搜索方法，也就是filter-method這個方法。
3.監(jiān)聽下拉框的出現(xiàn)與隱藏，也就是是否下拉，visible-change方法就可以實現(xiàn)。
4：tree控件的過濾方法，也就是通過關(guān)鍵字過濾樹節(jié)點，elementui的tree控件中有實例，filter-node-method就是過濾的方法。
5：單選并賦值的實現(xiàn)是使用了tree控件check方法，當(dāng)復(fù)選框被點擊的時候觸發(fā)，這個方法會傳遞兩個參數(shù)，具體的可以參考elementui官網(wǎng)tree控件的api。
具體代碼：

<el-col :span="12"><el-form-item label="部門" prop="deptName"><el-select id="deptNameId" v-model="certificateValue.deptName"filterable placeholder="請選擇":filter-method="filterTreeDate" @visible-change="changeValue($event)"><el-option style="height: auto" value="deptName"><el-treeref="treeForm":data="treeDatalist":props="defaultProps"default-expand-allnode-key="id"show-checkboxcheck-strictly:filter-node-method="filterNode"@check="handleCheckChange"/></el-option></el-select></el-form-item> </el-col>

methods中：

// 自定義過濾方法filterTreeDate(val) {this.certificateValue.deptName = valthis.$refs.treeForm.filter(val)},// 下拉框出現(xiàn)/隱藏時觸發(fā)changeValue(val) {if (!val) {this.$refs.treeForm.filter('')}},//過濾filterNode(value, data) {if (!value) return truereturn data.label.indexOf(value) !== -1},// 單選并賦值/*** 當(dāng)復(fù)選框被點擊的時候觸發(fā),傳遞了兩個對象* 依次為：傳遞給 data 屬性的數(shù)組中該節(jié)點所對應(yīng)的對象、樹目前的選中狀態(tài)對象，* 樹目前的選中狀態(tài)對象包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四個屬性* @param data* @param checked*/handleCheckChange(data, checked) {this.certificateValue.deptName = data.labelthis.certificateValue.deptId = data.idif (checked.checkedKeys !== '') {/*** 通過 keys 設(shè)置目前勾選的節(jié)點，使用此方法必須設(shè)置 node-key 屬性* 該方法接收兩個參數(shù)，1. 勾選節(jié)點的 key 的數(shù)組 2. boolean 類型的參數(shù)，* 參數(shù)若為 true 則僅設(shè)置葉子節(jié)點的選中狀態(tài)，* 默認(rèn)值為 false*/this.checkedId = data.idthis.$refs.treeForm.setCheckedKeys([data.id], true)} else {this.$refs.treeForm.setCheckedKeys([])}}

描述有誤的地方歡迎大家指正，大家有問題可加qq 876942434。一起進步~

總結(jié)

以上是生活随笔為你收集整理的elemtnui select控件结合树形控件 实现自定义搜索方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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