vxe-table vue表格解决方案 v4.6.6

# vxe-table 简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md) [](https://gitee.com/xuliangzhan_admin/vxe-table/stargazers) [](https://www.npmjs.com/package/vxe-table) [](https://travis-ci.com/x-extends/vxe-table) [](https://npm-stat.com/charts.html?package=vxe-table) [](https://github.com/x-extends/vxe-table/issues) [](https://github.com/x-extends/vxe-table/issues?q=is%3Aissue+is%3Aclosed) [](https://github.com/x-extends/vxe-table/pulls) [](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed) [](LICENSE) 一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式... * 设计理念 * 面向现代浏览器，高效的简洁 API 设计 * 模块化表格、按需加载 * 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能 * 计划 * [x] ~~v1.0 基于 vue2.6，支持所有主流的浏览器，实现表格的一切实用的功能~~ * [x] ~~v2.0 基于 vue2.6，支持所有主流的浏览器，同时兼具功能与性能~~ * [x] v3.0 基于 vue2.6，支持现代浏览器并保留兼容 IE11 * [x] v4.0 基于 vue3.x，只支持现代浏览器，不支持 IE * [ ] 下一阶段：sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化 ## 浏览器支持  |  |  |  |  --- | --- | --- | --- | --- | 80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ | ## 功能点 * [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] 虚拟合并 * [x] CSS 变量主题 * [x] (插件) 单元格区域选取 * [x] (插件) 单元格复制/粘贴 * [x] (插件) 单元格查找和替换 ## 安装 版本：[vue](https://www.npmjs.com/package/vue) 3.x ```shell npm install vxe-table@next ``` Get on [unpkg](https://unpkg.com/vxe-table/) and [cdnjs](https://cdn.jsdelivr.net/npm/vxe-table/) ### npm ```javascript import { createApp } from 'vue' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' createApp(App).use(VXETable).mount('#app') ``` ### CDN 使用第三方 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响 ***不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效*** ```HTML <!-- 引入样式 --> <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> ``` ## 示例 ```html <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> <script lang="ts" setup> import { ref } from 'vue' const tableData = ref([ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' } ]) </script> ``` ## 在线文档 👉 [官网文档](https://vxetable.cn) 参与文档完善、补充详细文档 💡 [官网文档源码](https://github.com/x-extends/vxe-table-docs) ## QQ 交流群 该群供大家交流問題，如果群人数已满，将会不定期剔除不活跃的。   ## 运行项目 安装依赖 ```shell npm run update ``` 启动本地调试 ```shell npm run serve ``` 编译打包，生成编译后的目录：es,lib ```shell npm run lib ``` ## License [MIT](LICENSE) © 2019-present, Xu Liangzhan