LJCityBoy / av-table

av-table是居于ant-design-vue（版本3.2.20） 的 a-table组件封装的虚拟列表组件。

居于ant-design-vue封装的虚拟列表组件av-table

av-table亮点

• 开箱即用，不破坏antd原有a-table的所有属性和方法，不破坏布局
• 能加载10W级别以上的数据而不卡顿
• 最重要的是，可以无缝移植到原有的居于ant-design-vue（3.2.20版本）项目中

源码地址

源码地址点这里

npm包下载地址

av-table在线演示地址

简介

• 用ant-design-vue的用户可能会遇到过一些性能上的烦恼：当页面中表格数据量达到一定量级的时候，滚动页面会变得非常卡顿。由于开发过程中疏忽了卡顿问题，等到项目进度已经100%的时候再回头去优化，发现如果要替换掉项目中原有的a-table代码改动量大，时间成本特别高，还存在一定的未知风险。未来解决这个烦恼，本人稍微改动了一下a-table，使其加载10w条数据也不会出现卡顿。所以，av-table就出现了。
• av-table是居于ant-design-vue（版本3.2.20） 的 a-table组件封装的虚拟列表组件。 av-table组件继承了a-table的所有属性和方法，用户在使用的时候可以直接参照a-table的api文档进行开发， 当然该虚拟列表组件新增了两个a-table没有的关键属性，需要使用者特别注意的，具体属性会在下面注明。
• 使用前一定要安装ant-design-vue(版本3.2.20)依赖
• 使用过程中，可能要传一下table的scroll.y，其中av-table的scroll参数与a-table的scroll参数一致 （ 原 ant-design-vue a-table 组件 API 传送地址点这里）

原理

• 简单说一下原理吧，请看下图：

额外新增两个参数如下：

参数	说明	类型	默认值	是否必填
virtualized	是否开启虚拟列表功能，默认开启，如果是 嵌套子表格的，建议关闭虚拟功能	boole	false	否
itemHeight	行高设置，当传入该值时，虚拟列表会优先根据该行高进行计算，当用户不传该值时，会根据 size 值选择行高，分别对应关系为：default = 55， middle = 47 small = 39	number	0	否

使用示例代码

main.ts代码如下

import { createApp } from "vue";
//记得引入antd.css，否则会样式丢失
import "ant-design-vue/dist/antd.css";
import App from "./App.vue";
import AVTable from "av-table";

createApp(App).use(AVTable).mount("#app");

App.vue代码如下

<template>
  <div id="app">
    <a-divider><h1>示例1</h1></a-divider>
    <AVTable
      :dataSource="dataSource"
      :virtualized="true"
      :columns="columns"
      :scroll="{ y: '400px' }"
      :pagination="false"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'operation'">
          <a>Publish</a>
        </template>
      </template>
    </AVTable>
    <a-divider><h1>示例2</h1></a-divider>
    <AVTable
      :data-source="dataSource"
      :columns="columns"
      :pagination="false"
      :virtualized="true"
      :scroll="{ y: '400px' }"
      :bordered="true"
      @resize-column="handleResizeColumn"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'name'">
          <a-input v-model:value="record[column.dataIndex]" />
        </template>
        <template v-else-if="column.dataIndex === 'age'">
          <a-input-number v-model:value="record[column.dataIndex]" />
        </template>
        <template v-else-if="column.dataIndex === 'joinDate'">
          <a-date-picker v-model:value="record[column.dataIndex]" />
        </template>
        <template v-else-if="column.dataIndex === 'operation'">
          <a>这是操作按钮</a>
        </template>
        <template v-else>
          <span>{{ text }}</span>
        </template>
      </template>
    </AVTable>
    <a-divider><h1>示例3</h1></a-divider>
    <AVTable
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :virtualized="true"
      :scroll="{ y: '400px' }"
      :bordered="true"
      class="components-table-demo-nested"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.dataIndex === 'operation'">
          <a>按钮</a>
        </template>
      </template>
      <template #expandedRowRender>
        <AVTable
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
        >
          <template #bodyCell="{ column }">
            <template v-if="column.key === 'state'">
              <span>
                <a-badge status="success" />
                Finished
              </span>
            </template>
            <template v-else-if="column.key === 'operation'">
              <span class="table-operation">
                <a>Pause</a>
                <a>Stop</a>
                <a-dropdown>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>Action 1</a-menu-item>
                      <a-menu-item>Action 2</a-menu-item>
                    </a-menu>
                  </template>
                  <a>
                    More
                    <down-outlined />
                  </a>
                </a-dropdown>
              </span>
            </template>
          </template>
        </AVTable>
      </template>
    </AVTable>
    <a-divider><h1>其他示例自己看ant-design-vue,谢谢！</h1></a-divider>
  </div>
</template>

<script setup>
import {
  Input as AInput,
  DatePicker as ADatePicker,
  InputNumber as AInputNumber,
  Badge as ABadge,
  Dropdown as ADropdown,
  Menu as AMenu,
  MenuItem as AMenuItem,
  Divider as ADivider,
} from "ant-design-vue";
import { DownOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
const dataSource = Array.from(
  Array(1000).fill({
    key: "1",
    name: "蒋哥哥",
    age: 18,
    joinDate: dayjs("2020-10-20", "YYYY-MM-DD"),
    address: "东莞xxxX电子厂",
    tag: "宇宙无敌帅气",
  }),
  (item, index) => ({ ...item, name: `${item.name}${index}`, key: index })
);

const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "入职日期",
    dataIndex: "joinDate",
    key: "joinDate",
    width: 180,
    resizable: true,
  },
  {
    title: "特征",
    dataIndex: "tag",
    key: "tag",
  },
  {
    title: "工作单位",
    dataIndex: "address",
    key: "address",
  },
  { title: "操作", dataIndex: "operation", key: "operation" },
];

const innerData = Array.from(
  Array(4).fill({
    key: 1,
    date: "2014-12-24 23:12:00",
    name: `阿蒋`,
    upgradeNum: "Upgraded: 56",
  }),
  (item, index) => ({ ...item, name: `${item.name}${index}`, key: index })
);

const innerColumns = [
  { title: "Date", dataIndex: "date", key: "date" },
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Status", key: "state" },
  { title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
  {
    title: "Action",
    dataIndex: "operation",
    key: "operation",
  },
];
</script>

<style scoped>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
#app {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
</style>