<a-tree-select
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
:loadData="onLoadData"
:treeData="orgTree"
@change="orgtreehand"
v-decorator="[
'org_parent_id',
{rules: [{ required: true, initialValue: 1, message: '请选择上级机构!' }]}
</a-tree-select>
export default{
data (){
orgTree: []
created: {
// 调用获取树数据的服务
getOrgTree().then(res=>{
this.orgTree = res.result.data
methods: {
onLoadData (treeNode) {
const _this = this
return new Promise((resolve) => {
if (treeNode.dataRef.children) { // 有值了直接渲染
resolve()
return
// 没有值根据当前父节点获取下面子节点并挂在树节点中,添加到对应父节点的children中
getOrgTree({ org_id: treeNode.dataRef.org_id }).then(res => {
treeNode.dataRef.children = res.result.data
_this.orgTree = [..._this.orgTree]
resolve()
:tree-data="treeData"
:load-data="onLoadData"
:replace-fields="{ children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' }"
placeholder="请选择
是一个基于 Vue.js 的树形选择组件,专门用于在前端创建可交互的树形选择器。它具有树形结构、多选和单选、搜索和过滤、异步加载、自定义模板等特点和功能。项目上第一次使用VueTreeselect实现懒加载、多选、异步、回显等功能时,摸索了很久。以此记录,若有不足望纠正补充。安装:npm install --save @riophae/vue-treeselect。
加上这两个属性就可以搜索了,name是通过name这个字段进行搜索。a-tree-select要实现搜索功能 不需要单独写方法。a-select要搜索功能需要加上。下面是绑定的搜索方法。
import React from 'react';
import {Tree, Input} from 'antd';
const TreeNode = Tree.TreeNode;
const Search = ...
这里要注意一下,搜索是要后台配合的,后台把查到的数据直接返给我们,我们拿来直接用就行,我这里还遇到一个问题,就是查到的只有code没有label,尽管树插件的插槽里显示的是label,但是normalizer格式化的时候是把name转换成label的,在异步搜索这里好像没有走格式化,必须是label有值才行,后端把label和name都赋同样的值后,就可以正常显示了。结尾需求搞出来之后,还是有点想哭的赶脚,前两天完全卡住了,写的也有问题,页面频发触发接口,不停的调,页面都奔溃过好几次。......