antdvue tree-select树选择组件选中值显示label拼接父节点-Toy模板网

这篇具有很好参考价值的文章主要介绍了antdvue tree-select树选择组件选中值显示label拼接父节点。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近使用antdv的a-tree-select实现一个功能：选中子节点需要拼接父节点
如图所示
vue-treeselect 选中子级获取父级值,前端,vue

问题就是没有直接的api可以支持
记录一下解决方法

原本的使用

// html
	<a-tree-select v-model:value="value" :tree-data="treedata" />

// js
const value = ref()
const treedata = reef([{
            title: '1',
            value: '1',
            children: [
              {
                title: '2',
                value: '2',
              },
              {
                title: '3',
                value: '3',
              },
            ],
          }])

修改后

// html
<a-tree-select
    labelInValue // 使用该属性 将值变成对象 包含 title value
    :value="treeValue" // 不双向绑定
    :tree-data="treedata"
    @select="selectTree" // 选择这里进行赋值操作
/>

//js
...
const treeValue = ref()
const selectTree = (val) => {
    value.value = val;
    treeValue.value = {
      value: val,
      label: getSelectedItem(val, treedata.value);,
    };
  };
  
// 因为我是只有两层 所以只需要遍历两层就好了 多层的话嵌套遍历一下
const getSelectedItem = (value, data) => {
    let str = '';
    data.some((d) => {
      return d.children?.some((c) => {
        if (c.value === value) {
          str = d.title + '/' + c.title;
          return true;
        }
      });
    });
    return str;
  };