如何使树选择在AntDV中每次总是展开所有节点

Question

我有两级部门链接，当我第一次随机选择一个一级部门选择器时，event onAChange会自动生成二级部门树选择器，并通过tree-default-expand-all展开所有节点。当我第二次在第一级选择器上选择另一个部门时，第二级树选择器不能自动展开所有节点...

当前:第二级树第一次无法展开所有节点

期望:二级树每次自动展开所有节点

First level selector

    <a-select
      :value="aSelectValue"
      @change="onAChange"
      :placeholder="placeholder"
      :allowClear="allowTreeClear"
      :disabled="departDisabled"
    >
      <a-select-option value="All">All</a-select-option>
      <a-select-option v-for="(item) in departOptions" :key="item.id" :value="item.departNumber">
         <span :style="labelStyle" :title="item.displayName">
          {{ item.departName }}
         </span>
      </a-select-option>
    </a-select>

Second level tree selector

      <a-tree-select
      :allowClear="allowTreeClear"
      show-search
      tree-default-expand-all
      :getPopupContainer="(node) => node.parentNode"
      style="width: 100%"
      :disabled="departDisabled"
      :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
      :value="departSelectValue"
      :tree-data="departTreeData"
      @change="onDepartTreeChange"
    >
    </a-tree-select>

Answer 1

作为一种解决方案，您可以使用antds tree-select api docs中描述的treeExpandedKeys。

在onChange调用中，您必须根据您的treeData更新这些密钥。

<a-tree-select
    ...
    :treeExpandedKeys="treeExpandedKeys"
></a-tree-select>

data() {
  return {
    departTreeData: [],
    treeExpandedKeys: [],
  ...
}

onBuChange(val) {
  ...
  _this.treeExpandedKeys = _this.departTreeData.map(data => data.key);
}

这是一个有效的CodeSandBox。