Vue2环境中AntDeisgn1.x的树形下拉选择组件
示例
相关代码
<a-tree-select
v-model="type"
show-search
style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择"
allow-clear
:tree-data="treeData"
:filter-tree-node="filterTreeNode">
</a-tree-select>
// 针对前后端树形数据结构不一致处理函数
transformTreeData(array) {
if(!isEmpty(array)) {
return array.map(nodeData => {
return {
title: nodeData.name,
value: nodeData.code,
key: nodeData.code,
children: isEmpty(nodeData.child) ? [] : this.transformTreeData(nodeData.child)
}
})
}
}
// 自定义过滤函数
filterTreeNode(inputValue, treeNode) {
// 根据中文名称(title)进行过滤
return treeNode.data.props.title.toLowerCase().includes(inputValue.toLowerCase());
},
学而不思则罔,思而不学则殆!