Vue前端的一些表格组件的思考

当我们需要在前端中展示一些表格内容时，我们往往使用Vue的table来实现

1. 原生态实现

当前实现如下：

2. 动态递归封装组件

2.1. 层级递归实现

3. 开源好用的一些Vue table 组件汇总

3.1. Vue easytable

Vue Easytable 是一个基于Vue2的表格组件，支持单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、分页、单元格编辑、多选、条件过滤、footer 汇总等功能。

3.1.1. 功能

• 自适应，可以随着浏览器窗口改变自动适应
• 固定列，表头固定
• 支持列宽拖动
• 支持单个字段排序和多个字段排序
• 自定义列、自定义单元格样式
• loading效果、自定义loading 等
• 自带分页组件
• 单元格编辑
• 支持单元格合并 (colSpan and rowSpan)
• 支持 checkbox 多选功能
• footer 汇总功能
• 添加条件过滤功能

1. 安装 Vue EasyTable:

首先，在你的 Vue 项目中安装 Vue EasyTable：

npm install vue-easytable --save

3.1.2. git地址和官方地址

• git地址：Happy-Coding-Clans/vue-easytable: A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc. (github.com)
• 官网地址：Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox (gitee.io)

3.1.3. 内容介绍

• 官网首页效果图

• 复合表头效果以及代码

• 单元格编辑

1、通过 `editOption`属性配置单元格编辑功能  
2、通过 `columns` 对象设置`edit=true`允许编辑的列

• 自定义事件

• 更多特性和API请前往官网文档查看

3.2. Vue Good Table

Vue Good Table是一款基于Vue.js的易于使用、高度可配置且灵活的表格组件，使得在Web应用中呈现大量数据非常容易。Vue Good Table允许您对表格进行排序、分页、筛选、编辑、导出、自定义列、自定义行、悬停和展开/收缩行等操作。

Vue Good Table使用简单，只需要导入并在Vue实例中注册即可：

3.2.1. 安装使用

npm i vue-good-table

3.2.2. git地址和官网地址

• git地址：xaksis/vue-good-table: An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc (github.com)
• 官网地址：vue-good-table (xaksis.github.io)

3.2.3. 内容介绍

1. 文档内容，官网文档首页

2. 暂未在goodtable中找到复合表头实现的样例，有样例或实现api留言评论唤醒笔者即可！

3.3. Vue vxe-table

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式为零代码而设计…

• 设计理念

  • 面向现代浏览器，高效的简洁 API 设计
  • 模块化表格、按需加载
  • 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能

3.3.1 功能

• 基础表格
• 配置式表格
• 基础表单
• 配置式表单
• 斑马线条纹
• 多种边框
• 单元格样式
• 列宽拖动
• 最小/最大高度
• 自适应宽高
• 固定列
• 多级表头
• 表尾数据
• 高亮行或列
• 序号
• 单选框
• 复选框
• 下拉选项
• 开关
• 排序
• 多字段排序
• 筛选
• 合并单元格
• 合并表尾
• 导入/导出/打印
• 显示/隐藏列
• 加载中
• 格式化内容
• 自定义插槽 - 模板
• 快捷菜单
• 展开行
• 分页
• 工具栏
• 下拉容器
• 虚拟列表
• 虚拟树
• 增删改查
• 数据校验
• 数据代理
• 键盘导航
• 弹窗
• 渲染器
• 虚拟滚动
• 虚拟合并
• CSS 变量主题
• (pro) 单元格区域选取
• (pro) 单元格复制/粘贴
• (pro) 单元格查找和替换

3.3.2. 安装使用

npm install xe-utils vxe-table@next

3.3.3 git地址和官网地址

• git地址：x-extends/vxe-table: vxe-table vue 表单/表格解决方案 (github.com)
• 官网地址：vxe-table v4 (vxetable.cn)

3.3.4. 内容介绍

1. 官网内容

2. 复合表头的实现

3.4. Tabulator

Tabulator 是一个基于 JavaScript 的交互式数据表格库，它提供了丰富的功能和灵活性，可以用于在 Web 应用中展示和操作数据表格。Tabulator 允许你快速创建可排序、可筛选、可分页的表格，还支持自定义样式、模板、事件处理等。

一些 Tabulator 的特点和功能包括：

• 丰富的特性： Tabulator 提供了排序、筛选、分页、编辑、行选择、复制粘贴、拖放等一系列功能，使得数据表格更具交互性和可操作性。

• 自定义模板： 你可以自定义单元格内容的模板，以便在表格中显示自定义格式的数据。

• 可扩展的插件： Tabulator 允许你使用插件来扩展功能，如导出数据、打印表格等。

• 多种数据源： Tabulator 支持从本地数据、远程数据、Ajax 请求等多种数据源中获取数据。

• 适应不同设备： Tabulator 是响应式的，可以在不同的设备上展示适应性强的表格。

• 支持多种主题： Tabulator 提供多种内置主题，也支持自定义样式。

• 强大的 API： Tabulator 提供了丰富的 API，可以通过编程方式控制表格的行为和状态。

• 跨浏览器支持： Tabulator 支持各种现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。

• 开源免费： Tabulator 是开源项目，可以免费使用和修改。

你可以访问官方网站和 GitHub 仓库以获取更多关于 Tabulator 的信息、文档和示例。

3.4.1. 安装使用

npm install tabulator-tables --save

3.4.2. git地址和官网地址

官方网站： http://tabulator.info/

GitHub 仓库： https://github.com/olifolkerd/tabulator

3.4.3. 内容介绍