效果
html
<el-select ref='stlectTree' v-model="treeSelectText" placeholder="请选择" filterable :filter-method="filterMethod" size="small">
<el-option :value="treeValue.id" :label="treeValue.label" style="height: auto;padding:0;">
<el-tree
class="ctims-treebox"
style="font-weight:400;"
:data="options"
:props="defaultProps"
default-expand-all
node-key="codeId"
:expand-on-click-node="false"
highlight-current
@node-click="nodeClick"
:filter-node-method="filterNode"
ref="tree" />
</el-option>
</el-select>
js
data() {
return {
options: [{
id: '000',
label: '根目录',
children: [{
id: '001',
label: '123321',
},{
id: '002',
label: '123213',
},{
id: '003',
label: '132321',
}]
}],
treeSelectText: '',
treeValue: {},
defaultProps: {
children: "children",
label: "label"
},
}
},
methods: {
// 点击tree节点
nodeClick(item) {
const { id, label } = item
this.treeValue.id = id;
this.treeValue.label= label;
this.treeSelectText = label
this.$refs.stlectTree.blur()
},
// 搜索逻辑
filterMethod(value) {
this.$refs.tree.filter(value)
},
// tree节点过滤
filterNode(value, data) {
if (!value) return true
return data.codeName.indexOf(value) !== -1
},
}
filterable: 是否启用搜索功能。默认情况下,Select 会找出所有label属性包含输入值的选项。
filter-method: 我们需要自定义搜索方法时执行的方法
filter-node-method: 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏,