Как я могу сделать так, чтобы a-tree-select всегда расширял все узлы каждый раз в AntDV - PullRequest
Новая
       15

Как я могу сделать так, чтобы a-tree-select всегда расширял все узлы каждый раз в AntDV

1 голос
/ 03 августа 2020

У меня есть двухуровневые связи отделов, в первый раз, когда я случайным образом выбрал отдел в селекторе первого уровня, селектор дерева отделов второго уровня будет автоматически сгенерирован событием 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>

1 Ответ

1 голос
/ 04 августа 2020

В качестве одного решения вы можете использовать treeExpandedKeys, описанный в antds tree-select api docs .

В вызове 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 .

...