基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件

友人a丶
JS笔记
1天前
15热度
0评论

VTable 多功能表格组件

基于 ant-design-vue 和 Vue 3 的功能强大的表格组件，支持列自定义、排序、本地化存储、行选择等特性。

当前组件继承了Ant-Design-Vue Table组件的所有列属性和方法，并在此基础上进行扩展。

演示地址：https://table.nicen.cn

Github：https://github.com/friend-nicen/table

1.特性

🚀 基于 ant-design-vue 3.x 和 Vue 3
📦 开箱即用的高性能表格组件
🎨 支持列自定义配置与本地存储
📊 灵活的排序和过滤功能

2.快速开始

<template>
  <v-table :init="'api/data'"/>
</template>

<script setup>
  import {initTable} from 'v-table';

  const columns = [
    {
      title: 'ID',
      width: 60
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: 120,
      sortable: 'number'
    }
  ];

  const table = initTable({
    unique: 'my-table',
    column: columns,
    localize: true
  });
</script>

API

1.VTable Props

v-table组件支持的属性，如下：

参数	说明	类型	默认值
init	数据初始化接口地址	string	-
dataSource	静态数据源	Record<string, any>[]	-
pagination	分页配置	TablePagination	{}
sticky	表头吸顶配置	{ offsetHeader: number }	{ offsetHeader: 60 }
rowsKey	行唯一标识字段	string	'id'
scroll	表格滚动配置	{ x: string \| number }	{ x: 'max-content' }
size	表格大小	'small' \| 'middle' \| 'large'	'large'
rowSelection	行选择配置	boolean \| Record<string, any>	false

2.TableColumn

表格列支持的属性，如下：

参数	说明	类型	默认值
title	列标题	string	-
dataIndex	列数据字段名	string	-
width	列宽度	number	100
fixed	列固定位置	boolean \| 'left' \| 'right'	false
resizable	是否可调整列宽	boolean	true
display	是否显示列	boolean	true
editable	是否可编辑	boolean	false
empty	是否允许为空	boolean	false
sortable	排序类型	'number' \| 'dayjs'	-
timestamp	时间戳格式	string	-

3.TableConfig

initTable调用时，支持传递的参数对象：

参数	说明	类型	默认值
unique	唯一标识字段	string	-
column	列配置	TableColumn[]	-
condition	查询条件	Record<string, any>	-
callback	数据加载成功回调	(data: any, pagination: TablePagination) => void	-
error	数据加载失败回调	(error: any, pagination: TablePagination) => void	-
filter	数据过滤器	(data: any[]) => any[]	-
immediate	是否立即加载数据	boolean	true
watch	是否监听条件变化	boolean	true
localize	是否本地化保存列配置	boolean	false
defaultExpandAllRows	是否默认展开所有行	boolean	true

4.TableInstance

表格对象的相关属性和方法，表格初始化之后，会调用 provide(table) ，任意子组件可通过inject获取表格对象：

参数	说明	类型
loadData	加载数据方法	(paginate?: TablePagination, filters?: Record<string, any>, sorter?: Record<string, any>) => Promise
selectRows	选中行数据	{ keys: any[], rows: any[] }
condition	查询条件	{ data: Record<string, any> }
editable	单元格是否可编辑	boolean[][]
dataSource	当前表格的数据对象	boolean[][]

示例

1.基础表格

<template>
  <v-table :init="'api/data'"/>
</template>

<script setup>
  import {initTable} from 'v-table';

  const columns = [
    {
      title: 'ID',
      width: 60
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: 120
    }
  ];

  const table = initTable({
    unique: 'basic-table',
    column: columns
  });
</script>

2.可选择表格

<template>
  <v-table
      :init="'api/data'"
      :row-selection="true"
  />
</template>

<script setup>
  import {initTable} from 'v-table';

  const columns = [
    {
      title: 'ID',
      width: 60
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: 120
    }
  ];

  const table = initTable({
    unique: 'selection-table',
    column: columns
  });

  // 获取选中行
  console.log(table.selectRows);
</script>

3.自定义列渲染

<template>
  <v-table :init="'api/data'">
    <template #bodyCell="{ text, record, column }">
      <template v-if="column.dataIndex === 'action'">
        <a-button @click="handleEdit(record)">编辑</a-button>
      </template>
    </template>
  </v-table>
</template>

<script setup>
  import {initTable} from 'v-table';

  const columns = [
    {
      title: 'ID',
      width: 60
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: 120
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: 120,
      fixed: 'right'
    }
  ];

  const table = initTable({
    unique: 'custom-table',
    column: columns
  });

  const handleEdit = (record) => {
    console.log('编辑行:', record);
  };
</script>