CODEWITHSUNDEEP
vue.jsantdvue-treeselect
Haven Lin
Haven Lin

Reputation: 176

How can i make a-tree-select always expand all nodes every time in AntDV

I have two-level department linkages, at the first time when I randomly chose a department at first level selector, the second level department tree selector will be automatically generated by event onAChange, and expand all nodes via tree-default-expand-all. when I chose another department at first level selector second time, the Second level tree selector can NOT automatically expand all nodes...

Current: second-level tree can not expand all nodes after the first time

Expected: second-level tree can automatically expand all nodes every time

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>

Upvotes: 1

Views: 1638

Answers (1)

zerocewl
zerocewl

Reputation: 12804

As one solution you can use the treeExpandedKeys described in antds tree-select api docs.

In the onChange call you have to update these keys depending on your treeData.

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

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

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

Here is a working CodeSandBox.

Upvotes: 1

Related Questions