数据量较大时表格(Scroll)滚动，会出现明显卡顿，是否支持设置延迟时间做防抖。

[彭十一。]

版本：3.0.2。

问题：当数据量比较大并且每个单元格有复杂判断逻辑(比较耗时)会渲染各种业务标签组件出来，虽然表格支持虚拟加载但是滚动过程中会一直加载单元格 导致单元格相关事件一直触发，滚动出现明显卡顿。但是看官网首页例子却是没有这个问题，不知道是有做什么处理还是和数据量有关系。

下面这段代码是自己尝试实现防抖，通过清理数据，重新加载数据。但是只能支持横向滚动，要解决纵向很麻烦而且不易用。
组件内部能否在滚动时可以设置数据延迟加载时间做防抖。

<template>
  <s-table
    rowKey="key"
    height="500px"
    :columns="columns"
    :scroll="{ y: 400 }"
    :pagination="false"
    :xVirtual="true"
    :dataSource="dataSource"
    @scroll="handleScroll()"
  >
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex.includes('name')">
        <a-input style="width: 40px" :defaultValue="text" />
      </template>
    </template>
  </s-table>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import { cloneDeep, debounce } from 'lodash-es';

const columns = ref([] as any);
const dataSource = ref([] as any);
for (let i = 0; i < 500; i++) {
  columns.value.push({
    title: `${i}`,
    dataIndex: `name${i}`,
    width: 50,
    align: 'left',
  });

  let obj = { key: i };
  for (let j = 0; j < 500; j++) {
    obj = Object.assign(obj, { [`name${j}`]: j });
  }
  dataSource.value.push(obj);
}

const originalData = cloneDeep(dataSource.value);
const temp = ref(false);
const handleDebounce = debounce(() => {
  console.log('执行防抖函数');
  dataSource.value = cloneDeep(originalData);
  temp.value = true;
}, 500);

const handleScroll = () => {
  if (temp.value) {
    temp.value = false;
  } else {
    dataSource.value = [];
    console.log('handleScroll');
    handleDebounce();
  }
};
</script>

[tangjinzhou]

1、v-if="column.dataIndex.includes('name')" 完全可以初始化的时候的把状态计算好，避免执行耗时操作
2、每个单元格都是 a-input 的话，会比较吃力，如果每个单元格都可编辑的话，建议直接使用原生 input 组件

[彭十一。]

1、可能是没有描述清楚，上面的代码是重现卡顿和自己尝试实现滚动防抖解决卡顿问题的一个Demo，实际业务场景比较复杂。
2、实际项目中使用的都是Vue3版本的 Ant Design Vue相关的组件，我们是基于s-table封装了一个在线编辑的组件，也有一些根据不同业务场景封装的业务组件，为了保证样式一致可能没办法使用原生组件。
3、之前在一些数据量不大的情况下没有卡顿问题，最近在一些数据量较大的复杂场景(单元格判断逻辑耗时，有些需要请求接口)滚动会出现明显卡顿，发现虽然有虚拟加载但是滚动过程中数据(单元格)会一直加载导致事件一直触发。
所以希望组件能支持滚动完成后多少秒在加载数据。

[tangjinzhou]

一边滚动一边接口请求数据？然后根据请求数据实时判断单元格的展示内容？
这个有点难搞，
可以试试先用空数据占位单元格，停止滚动后去加载对应数据

[tangjinzhou]

如果只是为了样式一致，可以自己写个简单的 input 自己写写样式，推荐将这个input封装成函数式组件，效果更好

[彭十一。]

主要问题是目前在滚动过程中，s-table会一直渲染单元格。
我看其他有一些表格组件针对大数据，可以设置延迟时间，在滚动时不渲染单元格，在滚动结束后才渲染单元格。
如果s-table不考虑这个的话，那我先用上面说的空数据占位单元格解决。