el-select结合el-tree 并能够搜索
先贴代码
<el-select
ref="select"
v-model="selectVal"
placeholder="请选择..."
size="mini"
clearable
style="width: 130px"
>
<!-- // 设置一个input框用作模糊搜索选项功能 -->
<el-input
v-model="treeFilter"
class="input"
placeholder="此处键入'关键词'搜索查询"
prefix-icon="el-icon-search"
size="mini"
style="padding: 5px"
clearable
/>
<!-- // 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value
// 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
<el-option key="id" hidden :value="selectVal" :label="selectName" />
<!-- // 设置树形控件 -->
<el-tree
ref="tree"
style="padding: 0px 10px 10px 0px"
:data="optionsMetaAll"
:props="defaultProps"
:expand-on-click-node="false"
:check-on-click-node="true"
node-key="id"
:default-expand-all="true"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
>
<!-- // @node-click：树形控件选项点击事件
// :expand-on-click-node：使树形控件只有点箭头图标的时候才会展开或者收缩节点，为false则点文字直接选中该项
// :check-on-click-node：是否在点击节点的时候选中节点，当选项为复选框时有用，这个属性可以删除
// :default-expand-all：默认展开所有节点
// :filter-node-method：实现搜索功能的筛选方法 -->
<span slot-scope="{ data }">
<!-- //选项用插槽来显示，匹配搜索功能，并方便增加tag标签需求 -->
<span>{{ data.label }}</span>
<!-- <el-tag
v-show="filterorgType(data.tag)"
size="mini"
style="margin: 0 10px"
>{{ filterorgType(data.tag) }}</el-tag> -->
</span>
</el-tree>
</el-select>
这个是js中的代码
data() {
return {
temp: {},
selectVal: '', // select框的绑定值
selectName: '', // select框显示的name
treeFilter: '', // 搜索框绑定值，用作过滤
// 树形控件数据
optionsMetaAll: [
{
id: '华成工控平台',
label: '华成工控平台',
value1: 1,
value2: 2,
children: [
{
id: '深圳市华成工业控制股份有限公司',
value1: 1,
value2: 2,
label: '深圳市华成工业控制股份有限公司',
isNew: true,
children: [
{
id: '研发部门',
value1: 3,
value2: 4,
label: '研发部门'
},
{
id: '市场部门',
value1: 6,
value2: 7,
label: '市场部门'
},
{
id: '测试部门',
value1: 8,
value2: 9,
label: '测试部门'
},
{
id: '财务部门',
value1: 10,
value2: 15,
label: '财务部门'
},
{
id: '运维部门',
value1: 0,
value2: 0,
label: '运维部门'
}
]
},
{
id: '郑州分公司',
value1: 1,
value2: 2,
label: '郑州分公司',
isNew: true,
children: [
{
id: '市场部门',
value1: 2,
value2: 2,
label: '市场部门'
},
{
id: '财务部门',
value1: 3,
value2: 4,
label: '财务部门'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'name'
}
// tagList: [
// { value: 'equipment', label: '设备' },
// { value: 'company', label: '公司' },
// { value: 'department', label: '部门' }
// ]
}
},
watch: {
// 搜索过滤，监听input搜索框绑定的treeFilter
treeFilter(val) {
this.$refs.tree.filter(val)
// 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
}
},
methods: {
// 结构树点击事件
handleNodeClick(data) {
this.temp = data
console.log(data)
this.selectVal = data.value // select绑定值为点击的选项的value
this.selectName = data.label // input中显示值为label
this.treeFilter = '' // 点击后搜索框清空
this.$refs.select.blur() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
},
// 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
filterNode(value, data) {
if (!value) return true
const filterRes = data.label.indexOf(value) !== -1
return filterRes
},
changeTelescopic(data) {
this.temp = data
console.log(this.temp)
}
// 选项卡标签（可忽略，增值迭代需求）
// filterorgType(val) {
// const arr = this.tagList.filter((item) => {
// return item.value === val
// })
// return arr.length ? arr[0].label : ''
// }
}
