TreeSelect 下拉选择框显示完全路径

a-tree-select 在选中某一个节点时,回显到框中的名称默认为该节点的title,如下:

但是如果需要想显示类似aaa/bbb2/ccc2这种全部路径,参考api treeNodeLabelProp该属性,重新设置它;

主要代码:

<a-tree-select
                    allowClear
                :showSearch="true"
                treeNodeLabelProp="label"
                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                :treeData="treeData"
                :replace-fields="replaceFields"
                v-decorator="['id', validatorRules.deptId]"
              >
              </a-tree-select>

其中label为拿到treeData数据时处理后的全部路径(aaa/bbb2/ccc2):

formatTreeData(arr,name){
      return arr.map(item=>(
        {
          label:(name?`${name}/`:'')+item.title,
          value:item.value,
          title:item.title,
          childList:Array.isArray(item.childList)? this.formatTreeData(item.childList,(name?`${name}/`:'')+item.title):null
        }
      ))
    }

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值