Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
yusongh opened this issue Apr 7, 2025 · 4 comments

Comments

@yusongh
Copy link

yusongh commented Apr 7, 2025

  • 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?

重新展开显示空白

@jianhao
Copy link

jianhao commented Apr 8, 2025

刚遇到类似场景,点开issue第一条就发现你这个了,真是很巧,我的场景是:

  1. 编辑弹窗里有 TreeSelect, 点开TreeSelect并向下滚动后关闭弹窗
  2. 再次点开弹窗,点开TreeSelect选项,显示白屏,向下滚动后恢复

Image

猜测跟虚拟滚动处理有关,临时解决方案就是让他点开弹窗时重新加载TreeSelect组件,设置个v-if=“visible” 给 TreeSelect。

@Tian-ya-luer
Copy link

@jianhao 用的2.x版本,在火狐一切正常,在谷歌浏览器上,如果是select展开并滚动一定距离,然后离开页面,再然后回来再打开就显示空白,调试发现dom元素渲染的还是上一次滚动的区域,但是刚展开滚动条却在最上面。界面上看起来就是空白的

@weidongjian
Copy link

也出现同样的问题了,ant的版本:4.2.5,出现异常的截图

Image

滑动鼠标滚轮后,会恢复正常

Image

@Tian-ya-luer
Copy link

@jianhao 用的2.x版本,在火狐一切正常,在谷歌浏览器上,如果是select展开并滚动一定距离,然后离开页面,再然后回来再打开就显示空白,调试发现dom元素渲染的还是上一次滚动的区域,但是刚展开滚动条却在最上面。界面上看起来就是空白的

虚拟滚动问题,改一下好了
getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants