Skip to content

treeSelect 树选择器往下滚动后,重新复制选项数据,重新展开显示空白 #8119

Open
@yusongh

Description

@yusongh
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

chrome

Reproduction link

Edit on CodeSandbox

<template>
  <a-tree-select
    v-model:value="checkedKeys"
    style="width: 100%"
    tree-checkable
    tree-default-expand-all
    :show-checked-strategy="SHOW_PARENT"
    :height="233"
    :tree-data="treeData"
    :max-tag-count="10"
    tree-node-filter-prop="title"
  >
    <template #title="{ title, value }">
      <span v-if="value === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
      <template v-else>{{ title }}</template>
    </template>
  </a-tree-select>
  <button @click="test">更新选项数据</button>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { TreeSelectProps } from 'ant-design-vue';
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

function dig(path = '0', level = 3) {
  const list: TreeSelectProps['treeData'] = [];
  for (let i = 0; i < 10; i += 1) {
    const value = `${path}-${i}`;
    const treeNode: TreeSelectProps['treeData'][number] = {
      title: value,
      value,
    };

    if (level > 0) {
      treeNode.children = dig(value, level - 1);
    }

    list.push(treeNode);
  }
  return list;
}

const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
watch(checkedKeys, () => {
  console.log('checkedKeys', checkedKeys);
});
const treeData = ref<TreeSelectProps['treeData']>(dig());

// 重新赋值
const test = () => {
  treeData.value = dig()
}
</script>

Steps to reproduce

(1) treeSelect 树选择器往下滚动后
(2) 重新复制选项数据
(3) 重新展开显示空白

What is expected?

重新展开时正常显示选项的数据

What is actually happening?

重新展开显示空白

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions