vxe-table

一个基于 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