Vue技术之Vxe-Table的虚拟滚动

虚拟滚动

纵向虚拟滚动：scroll-y

横向虚拟滚动：scroll-x

1.首先留意项目中使用的版本，我这边在项目用的是

"vxe-pc-ui": "4.0.95"版本

"vxe-table": "4.7.65"版本

 所以scroll-y是可使用的，这里的弃用是因为在"vxe-table": "4.10.6"版本加入virtual-y-config，替代了scroll-y，可参考以下属性介绍

 

2.代码

<template>
  <div>
    <vxe-table
      border
      row-id="id"
      :data="tableData"
      height="100%"
      :row-config="{ height: 250 }"
      :auto-resize="true"
      :scroll-y="{ enabled: true}"
    >
      <vxe-column type="seq" width="180" title="序号"/>
      <vxe-column field="name" title="导航名称"/>
      <vxe-column field="url" title="URL"/>
    </vxe-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          seq: 1,
          name: "系统管理",
          url: "sys/right",
        },
        {
          seq: 2,
          name: "报表管理",
          url: "report/right"
        }
      ]
    };
  }
};
</script>

 

 

3.注意：

• 启动纵向虚拟滚动之后将不能支持动态行高，所以我项目中出现了行数据重叠问题，解决方案：采用固定行高250px【  :row-config="{ height: 250 }"】
• 其他重要的配置【

  height="100%"           // 表格高度占满父容器：表示表格高度会填充其父容器。如果父容器的高度是固定的，那么当数据行数增加时，表格内部就会出现滚动条。
  :auto-resize="true"     // 自动适应容器大小变化

  】
• 调整oSize为一个合适的值，比如20，以减少每次渲染的行数，降低单次渲染耗时。如果浏览器性能较低可以设置大些，降低渲染次数
• 确保rSize（真实行高）设置准确，如果行高不固定，可以使用动态计算的值。这个参数实际上是没有找到的，具体没看到效果尽可能不加
• 正常来说scroll-y默认状态下应该是false，但是当行数达到200时，我项目中并未启动scroll-y，行数还是重叠了，应该是底层加了什么触发事件【目前没找到】
• 如果你希望控制在多少行时才出现滚动，可以调整 gt 的值，比如设置为200，这样在200行以内不会出现滚动，超过200行才会出现滚动。
• 官网：https://vxetable.cn/#/table/api