npm package: @pluve/lego-virtual-table-vue
Description: 乐高系列之 virtualTable 组件
Author: zhaoyajie
Latest version: 0.2.0

# @pluve/lego-virtual-table-vue

乐高系列之 `virtualTable` 组件

[![npm (scoped)](https://img.shields.io/npm/v/@pluve/lego-search-vue?style=for-the-badge)](https://www.npmjs.com/package/@pluve/lego-search-vue)

基于运营平台UI@2.0的交互要求，在`ant-design-vue` table组件的基础上进行二次封装的虚拟滚动表格，建议配合 [`@pluve/use-antd-table-vue`](https://www.npmjs.com/package/@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。不能使用合并行，展开行，合并列等

## 安装
```shell
# 使用 npm
npm i @pluve/lego-lego-virtual-table-vue

# 使用 yarn
yarn add @pluve/lego-lego-virtual-table-vue
```

## 使用

```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`