以下是一个使用Vue和Element UI实现的下拉树形结构选择部门(支持多选和搜索)的简单示例:
<template>
<div>
<el-tree
:data="departments"
show-checkbox
node-key="id"
:props="defaultProps"
:default-expanded-keys="defaultExpandedKeys"
:filter-node-method="filterNode"
ref="tree"
@check-change="handleCheckChange"
></el-tree>
<el-input
placeholder="输入关键词进行过滤"
v-model="filterText">
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
filterText: '',
defaultProps: {
children: 'children',
label: 'name'
},
departments: [
{
id: 1,
name: '部门A',
children: [
{
id: 2,
name: '部门A-1'
},
{
id: 3,
name: '部门A-2',
children: [
{
id: 4,
name: '部门A-2-1'
}
]
}
]
},
{
id: 5,
name: '部门B'
}
],
defaultExpandedKeys: []
};
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
}
}
};
</script>
这段代码中,我们使用了el-tree
组件来展示树形结构,并通过show-checkbox
属性来支持多选。node-key
属性用来指定节点的唯一标识,props
属性用来定义节点属性的名称。filter-node-method
定义了一个方法用于对节点进行过滤。
filterText
是用于搜索的数据绑定,通过watch监听它的变化来过滤树节点。handleCheckChange
方法用于处理节点的选中状态变化。
这个例子提供了一个简单的起点,您可以根据实际需求进一步扩展和自定义。