Antd-vue ツリーセレクター treeData の属性名を変更 (再帰実装)

プロジェクト開発では、antd-vue のツリーセレクターを使用しますが、antd-vue のツリーセレクターの treeData のキーと値のペアはタイトルと値ですが、バックグラウンドで提供するデータはタイトルとキーであり、対応していません
。そのため、データを再帰的に変更する必要があります。

問題分析

1. 公式サイトの例

 //我们可以看到:tree-data="treeData" 这个tree-data依赖的数据是键值对title和value.
<a-tree-select
    v-model:value="value"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
    :tree-data="treeData"
  >
    <template #title="{ value: val, title }">
      <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
      <template v-else>{
    
    { title }}</template>
    </template>
  </a-tree-select>

//这是antd-vue的treeData,有一层层的title和value以及children
  const treeData = ref([
      {
        title: 'parent 1',
        value: 'parent 1',
        children: [
          {
            title: 'parent 1-0',
            value: 'parent 1-0',
            children: [
              {
                title: 'my leaf',
                value: 'leaf1',
              },
              {
                title: 'your leaf',
                value: 'leaf2',
              },
            ],
          },
          {
            title: 'parent 1-1',
            value: 'parent 1-1',
          },
        ],
      },
    ]);

2. バックグラウンドから返されたデータを実現する

バックグラウンドから返されたデータは、タイトル、キー、および子で構成され、子はタイトル、キー、および子で構成されていることがわかります。

データを再帰的に変換する

次に、バックグラウンドから返されたデータを変更する再帰アルゴリズムを記述し、バックグラウンドでタイトルとキーを公式 Web サイトで必要なタイトルと値に変更する必要があります。

//递归函数
let useFormatTree = (data) => {
    // data:传入的需要修改的后台数据
    let item: any = [];//定义一个空数组
    data.map((list) => {//遍历后台数据
        //定义一个空对象
        let newData = {};
        //给后台中的每一项赋值给这个新的对象
        newData.title = list.title;
        newData.value = list.key;
        //判断后台数据这项是不是有children，有的话递归调用，没有的话就为空。
        newData.children = list.children ? useFormatTree(list.children) : []
        //将这个对象push进定义的新数组
        item.push(newData);
    })
    return item;    //返回这个定义的数组，结果就是改造成功的结果。
}

変換されたデータを見てみましょう. データがタイトルと値の形式に変換されていることがわかります.

---

さっさと練習しろ、デイ兄弟、練習しないとダメだ！

私をサポートすることを忘れないでください、わかりました、ペアで良いことを願っています~~~~~~