vxe

2023-08-14 10:07| 来源: 网络整理| 查看: 265

vxe-table

简体中文 | 繁體中文 | English

npm version npm build npm downloads issues issues closed pull requests pull requests closed npm license

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

设计理念

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

计划

v1.0 基于 vue2.6 < 3，支持所有主流的浏览器，实现表格的一切实用的功能 v2.0 基于 vue2.6 < 3，支持所有主流的浏览器，同时兼具功能与性能 v3.0 基于 vue2.6 < 3，支持现代浏览器并保留兼容 IE11 v4.0 基于 vue3.2 < 4，只支持现代浏览器，不支持 IE 下一阶段：sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化浏览器支持 Edge

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

版本：vue 3.x, 依赖库：xe-utils

npm install xe-utils vxe-table@next

Get on unpkg and cdnjs

npm import { createApp } from 'vue' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' createApp(App).use(VXETable).mount('#app') CDN

不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉; 使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响

示例 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' } ]) 在线文档

👉 官网文档

参与文档完善、补充详细文档

💡 官网文档源码

QQ 交流群

该群供大家交流問題，如果群人数已满，将会不定期剔除不活跃的。

运行项目

安装依赖

npm run update

启动本地调试

npm run serve

编译打包，生成编译后的目录：es,lib

npm run lib License

【本文地址】

公司简介

联系我们