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
        }
      ))
    }

 

 


版权声明:本文为AwakeningOfInsects原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。