@pluve/lego-virtual-table-vue

乐高系列之 virtualTable 组件

基于运营平台UI@2.0的交互要求，在ant-design-vue table组件的基础上进行二次封装的虚拟滚动表格，建议配合 @pluve/use-antd-table-vue 使用。

@pluve/use-antd-table-vue 已经投入了我们的生产环境中使用，经受住了来自真实业务的考验，并伴随着我们的业务需求不断完善。

特性

• 能支撑10万+数据展示和交互
• 性能优越，豪秒级渲染
• 使用简单，0负担改造现有表格

缺点

所有行必须等高； 不能使用合并行，展开行，合并列等 原有table里的函数注入的参数index不准确，需要使用导出的方法'getStartRowIndex'获取开始行得到当前行标 getStartRowIndex()+index

默认配置

| 属性 |类型|默认值 | 描述 | | --- | --- | --- | | rowHeight | Number | 必填|当前表格行高 | | dataSource | Array | 必填| 注入数据 | | scroll | { x:number, y:number} | 必填| 表格宽高 | |rangeStep| number | 10| 实际渲染的队列长度，需要铺满y的高度，数值越大性能越差 |

方法

| 名称 | 参数 |描述 | | --- | --- |I | scrollTo | rowIndex| 滚动表格到多少行 | | tableRef| 表格实例| 可使用antd表格方法 | |getStartRowIndex|无|获取到当前开始渲染行 currentRowIndex = getStartRowIndex()+index;

表单校验

1.支持继承antdV table 的所有API 2.原表格函数index不准确，需要配合 getStartRowIndex使用 3。不能使用合并行，展开行，合并列等

安装

# 使用 npm
npm i @pluve/lego-lego-virtual-table-vue

# 使用 yarn
yarn add @pluve/lego-lego-virtual-table-vue

使用

<template>
   <LegoVirtualTable ref="tableRef" :columns="columns" :data-source="data" :enable-virtual="true" :row-height="55" :range-step="15"
      :scroll="{ y: 400, x: 1500 }">
      <template #action="{index:rowIndex,record}">
        <a>action {{ rowIndex }}</a>
      </template>
    </LegoVirtualTable>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import { reactive,ref } from "vue";
import LegoVirtualTable from "./components/index.entry";

interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
}

const columns: any[] = [
  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left',ellipsis:true },
  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150,ellipsis:true  },
  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150,ellipsis:true  },
  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150,ellipsis:true  },
  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150,ellipsis:true  },
  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150,ellipsis:true  },
  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150,ellipsis:true  },
  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150,ellipsis:true  },
  { title: 'Column 8', dataIndex: 'address', key: '8',ellipsis:true  },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 100,
    slots: { customRender: 'action' },
  },
];

const tableRef = ref();

const data: DataItem[] = [];
for (let i = 0; i < 100000; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 31,
    address: `London Park no. ${i}`,
  });
}

const scrollTo = () => {
  tableRef.value.scrollTo(1000)
}

</script>

Keywords

lego lego-virtualTable lego-virtualTable