tiny-vue icon indicating copy to clipboard operation
tiny-vue copied to clipboard

🐛 [Bug]: 【Table】 data request (quantity from 500 to 10),abnormal blank block

Open Felix-jk opened this issue 1 year ago • 0 comments

Version

3.11.2

Vue Version

3.3.4

Link to minimal reproduction

<template>
  <tiny-grid height="500" :fetch-data="fetchData" seq-serial :pager="pagerConfig">
    <tiny-grid-column type="index" width="60"></tiny-grid-column>
    <tiny-grid-column field="name" title="名称"></tiny-grid-column>
  </tiny-grid>
</template>

<script setup lang="jsx">
import { ref } from "vue";
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from "@opentiny/vue";

const pagerConfig = ref({
  attrs: {
    currentPage: 1,
    pageSize: 50,
    pageSizes: [50, 500, 1000],
    total: 0,
    layout: "total, prev, pager,  sizes"
  }
});
const fetchData = ref({
  api: getData
});

function getData({ page }) {
  const { pageSize } = page;

  const randomAlphabets = () => {
    return String.fromCharCode(65 + Math.floor(26 * Math.random()));
  };

  const data = Array.from({ length: pageSize }).map((item, i) => {
    return {
      id: i + 1,
      name: randomAlphabets() + "科技公司"
    };
  });

  return Promise.resolve({
    result: data,
    page: { total: data.length }
  });
}
</script>



image

Step to reproduce

What is expected

No response

What is actually happening

分页切换回50,表格内容前不应该出现空白占位,纵向滚动条应该定位会最顶端

No response

Any additional comments (optional)

No response

Felix-jk avatar Jan 09 '24 02:01 Felix-jk