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

您可以使用 `treeData` 属性来提供树形数据，然后使用 `value` 属性来绑定选中的节点的值。如果要显示选中的节点的 `label` 并拼接父节点的 `label`，您可以使用 `render` 属性来自定义选项的渲染方式。例如：

<template>
  <a-tree-select
    :tree-data="treeData"
    :value="selectedValue"
    allow-clear
    :render="renderOption"
    @change="handleSelectChange"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Node 1',
          value: '1',
          key: '1',
          children: [
            {
              title: 'Child Node 1',
              value: '1-1',
              key: '1-1',
            },
            {
              title: 'Child Node 2',
              value: '1-2',
              key: '1-2',
            },
          ],
        },
        {
          title: 'Node 2',
          value: '2',
          key: '2',
        },
      ],
      selectedValue: '',
    }
  },
  methods: {
    renderOption(h, { node, selected, multiple }) {
      const label = node.title
      const parentLabel =
        node.parentNode && node.parentNode.title ? node.parentNode.title + ' > ' : ''
      return h('span', {}, parentLabel + label)
    },
    handleSelectChange(value) {
      this.selectedValue = value
    },
  },
}
</script>

在上面的代码中，我们使用 `render` 属性来自定义选项的渲染方式。我们首先获取当前节点的 `title`，然后使用 `parentNode` 属性获取父节点，如果父节点存在，则获取父节点的 `title` 并拼接在当前节点的前面。最后将拼接好的字符串渲染为选项的标签。在 `handleSelectChange` 方法中，我们将选中的值绑定到 `selectedValue` 变量上。