vxe-table 和 vxe-grid 的区别，有什么区别

vue vxe-ui vxe-table 和 vxe-grid 的区别，有什么区别

仰望.

10275人浏览 · 2021-03-25 18:35:10

仰望. · 2021-03-25 18:35:10 发布

vxe-ui vxe-table 和 vxe-grid 的区别，有什么区别?

查看 github

两者基础功能完全一致，高级功能grid专用。其次是调用方式不同：grid 配置式组件 >= table 标签式组件

说明	table（标签式静态表格）	grid（配置式表格）
用法	使用标签配置 <vxe-column field=“xx” …/>	完全 JSON 配置：{ field: ‘xx’, … }
动态列	√仅支持静态列	√ 全动态 JSON
基础参数及事件	√	√
边框	√	√
序号	√	√
复选框	√	√
单选框	√	√
高亮行或列	√	√
格式化内容	√	√
筛选	√	√
多列排序	√	√
列宽拖动	√	√
分组表头	√	√
冻结列	√	√
自定义列	√	√
列拖拽排序	√	√
展开行	√	√
树形结构	√	√
按键导航	√	√
显示/隐藏列	√	√
右键快捷菜单	√	√
合并	√	√
导入（xlsx,csv,html,xml,txt）	√	√
导出（xlsx,csv,html,xml,txt,pdf）	√	√
打印	√	√
自定义模板	√ （插槽模板）	√ 全部支持（插槽模板、JSX模板、渲染函数）
虚拟滚动	√	√
全局渲染器	√	√
全局快捷菜单	√	√
全局格式化	√	√
表单		√ 集成
工具栏		√ 集成
分页		√ 集成
CRUD	√ 手动处理（新增、删除、修改、标记）	√ 数据代理（查询、新增、删除、修改、标记）
数据校验	√	√
数据代理		√
全屏放大		√
鼠标选取（企业版）	√	√
复制/粘贴（企业版）	√	√
查找/替换（企业版）	√	√
选取与图表渲染（企业版）	√	√

总结

table 能做的 grid 也能做，table 不能做的 grid 也能做。

以下为部分效果图：

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^