一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表Q、虚拟树、懒加载、快捷菜单、数据验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等..
●设计理念
。面向现代浏览器，高效的简洁 API 设计
。模块化表格、按需加载、扩展接口o
。为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能
●计划
。[x] v1.0 基于 vue2.6+，支持所有主流的浏览器，实现表格的一切实用的功能
。[x] v2.0 基于 vue2.6+，支持所有主流的浏览器，同时兼具功能与性能
。[x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11，提升染性能
。[x] v4.0 基于 vue3.0+，只支持现代浏览器，不支持 IE
。[ ]下一阶段: sticky 染模式、css 变量主题、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化
浏览器支持
功能点
[x] 基础表格
[x] 高级表格
[x] 斑马线条纹
[x] 多种边框
·[x] 单元格样式
[x] 列宽拖动
[x] 最大高度
[x] 自适应宽高
[x] 固定列
[x] 多级表头
[x] 表尾数据
[x] 高亮行或列
[x] 序号
[x] 单选框
[x] 复选框
[x] 下拉选项
[x] 开关
[x]排序
[x] 多字段组合排
[x] 筛选
[x] 合并单元格
[x] 合并表尾
[x] 导入/导出打印
[X] 显示/隐藏列
[x] 加载中
[x] 格式化内容
[x] 自定义插槽 - 模板
[x] 快捷菜单
[x] 展开行
[x] 分页
[x] 表单
[x] 工具栏
[x] 下拉容器
[x] 虚拟列表
[x] 虚拟树
[x] 增删改查
[x] 数据校验
[x] 数据代理
[x] 键导航
[x] 弹窗
[x] 器
[x] 虚拟滚动
[x] 虚拟合并
[x] (pro) 单元格区域选取
[x] (pro) 单元格复制/粘贴
[x] (pro) 单元格查找和换
安装
版本: vue 3.x,依赖库: xe-utils
npm install xe-utils vxe-table@next
Get on unpkg and cdnjs
npm
import { createApp } from 'vue' import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount('#app'）
CDN
不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
<!-- 引入样式 --> <link rel="stylesheet”href="https://unpkg.com/vxe-table@next/lib/style.css"> <!-- 引入脚本 --> <script src="https://unpkg.com/xe-utils"></script> <script src="https://unpkg.com/vxe-table@next"></script>
示例
<template> <div> <vxe-table :data="tableData"> <vxe-column type="seq” title="Seq”width="60"></vxe-column><vxe-column field="name”title="Name"></vxe-column><vxe-column field="role” title="Role"></vxe-column> <vxe-colgroup title="Group1"><vxe-column field="sex” title="Sex"></vxe-column><vxe-column field="address” title="Address"></vxe-column></vxe-colgroup> </vxe-table> </div> </template>
</div><div>import { defineComponent, ref 3 from 'vue</div><div>export default defineComponent(f</div><div>setup () [</div><div>const tableData = ref(l</div><div>{ id: 10001, name: Test1’, role: Develop', sex: Man', address: 'Shenzhen'<span>}</span>，</div><div>{ id: 10002, name: Test2', role: “Test, sex: Man', address: Guangzhou'}</div><div>{ id: 10003, name:Test3', role: PM', sex: Man', address: 'Shanghai' <span>}</span></div><div>】）</div><div>return<span>{ </span></div><div>tableData</div><div><span>}</span></div><div><span>}</span></div><div><span>}）</span></div><div>
运行项目
安装依赖
npm install
启动本地调试
npm run serve
编译打包，生成编译后的目录: es,lib
npm run lib
License
MIT @ 2019-present, Xu Liangzhan
Keywords
vxe-table
vxe-grid
vue table
vue grid
