【element-ui】el-select和el-tree组合使用实现搜索功能

效果

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 则表示这个节点会被隐藏，