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

VTable 多功能表格组件

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

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

演示地址:table.nicen.cn

Github:github.com/friend-nice...

原文:nicen.cn/8010.html

特性

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

快速开始

vue 复制代码
<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

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 |

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 | - |

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

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[][]

插槽

名称 说明 参数
expandedRowRender 展开行渲染 { record }
headerCell 自定义表头单元格 { column }
bodyCell 自定义表格内容 { text, record, index, column }
summary 表格汇总行 { data }

示例

基础表格

vue 复制代码
<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>

可选择表格

vue 复制代码
<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>

自定义列渲染

vue 复制代码
<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>

许可证

MIT

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js