antdv+vue 中的tree结构的增删改查

1.首先我遇到的一个点就是如何将后端不同数据的字段渲染到页面上，这是要用到:field-names="fieldNames",对其进行定义自己的字段名，和后端接口查询出来的数据一样

const fieldNames= {
    title: 'dataAssetsName',
    key: 'dataAssertsId',
    parentId:'parentId'
  }

2.第二个就上对结构进行一系列的增加修改删除的操作，在#title中能够进行一些dom的操作。一些具体的操作主要是对其进行一个a-modal的编写，在子组件中进行相应的操作。

<a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" :field-names="fieldNames"
        :tree-data="treeData" style="border-radius: 0px; background-color: #edecec; font-size: 15px;">
        <template #title="{ dataAssetsName, dataAssertsId ,parentId}" v-if="props.type==2">
          <div style="display: flex;">
            <FileFilled style="margin-right: 5px;" />
            <div style="margin-right: 10px;" @click="toggleControls(dataAssertsId)">{{ dataAssetsName
              }}{{ parentId }}</div>
            <div v-if="activeKey === dataAssertsId">
              <a style="margin-right: 5px">
                <PlusCircleFilled style="color: #6b6b6b;" @click="handleAdd(dataAssertsId, 0,parentId)" />//增加
              </a>
              <a style="margin-right: 5px">
                <MinusCircleFilled style="color: #6b6b6b;" @click="handleDelete(dataAssertsId)" />//删除
              </a>
              <a>
                <EditFilled style="color: #6b6b6b;" @click="handleAdd(dataAssertsId, dataAssetsName)" />//编辑
              </a>
            </div>
          </div>
        </template>
</a-tree>