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());
},