treeSelect多选自定义展示内容

最新推荐文章于 2024-03-24 19:32:41 发布

_CherryBoom_

最新推荐文章于 2024-03-24 19:32:41 发布

阅读量1.3k

点赞数 9

分类专栏： vue react 文章标签：前端

本文链接：https://blog.csdn.net/m0_71266141/article/details/134881599

版权

react 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

treeSelect自定义展示内容为“一层title/二层title”格式（react antd4以下，vue1 antdv）

以vue1 antdv为例

tree-checkable可选框

SHOW_PARENT 选择父级展示父节点而不是全部

label-in-value改变value结构从[id],[{value:xxx,label:"xxx"}]

change函数修改label

请求接口拿到treedata数据的时候将每一层里加入longtitle作为后续change修改label的字段

     this.bizScenes = this.bizScenes?.map((item: any) => {
        return {
          ...item,
          value: item.id,
          label: item.name,
          longTitle: item.name,
          children: item.children?.map((item1: any) => {
            return {
              ...item1,
              value: item1.id,
              label: item1.nameChild,
              longTitle: item.name + "/" + item1.nameChild,
            };
          }),
        };
      });

change函数进行label修改

  sceneChange(value: any, label: any, extra: any) {
    value?.map((item: any) => {
      extra.allCheckedNodes?.map((item1: any) => {
        if (item.value === item1.node.data.props.value) {
          item.label = item1.node.data.props.longTitle;
        }
      });
    });
  }

展示

全部代码

        <a-tree-select
          :tree-data="bizScenes"
          tree-checkable
          :show-checked-strategy="SHOW_PARENT"
          v-model="value"
          @change="sceneChange"
          label-in-value
        />


     this.bizScenes = this.bizScenes?.map((item: any) => {
        return {
          ...item,
          value: item.id,
          label: item.name,
          longTitle: item.name,
          children: item.children?.map((item1: any) => {
            return {
              ...item1,
              value: item1.id,
              label: item1.nameChild,
              longTitle: item.name + "/" + item1.nameChild,
            };
          }),
        };
      });

    sceneChange(value: any, label: any, extra: any) {
        value?.map((item: any) => {
          extra.allCheckedNodes?.map((item1: any) => {
            if (item.value === item1.node.data.props.value) {
              item.label = item1.node.data.props.longTitle;
            }
          });
        });
      }

注：react antd的话就把对应的api换成官方文档对应的就可以了

回填的话把v-model对应的值的格式写成label-in-value（[{value:xxx,label:"xxx"}]）的格式就能正确回填