vxe-table
简体中文 | 繁體中文 | English
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...
- 设计理念
- 面向现代浏览器,高效的简洁 API 设计
- 模块化表格、按需加载、扩展接口
- 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能
QQ 交流群
浏览器支持
| | | | | |
---|
11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 8+ ✔ |
功能点
安装
版本:vue 2.6.x, 依赖库:xe-utils
npm install xe-utils vxe-table@3
Get on unpkg and cdnjs
npm
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
CDN
不建议将公共的 CDN 地址用于生产,因为该连接随时都可能会失效,导致项目挂掉;
使用 CDN 方式记得锁定版本号,避免受到非兼容性更新的影响
<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/style.css">
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></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-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>
export default {
data () {
return {
tableData: [
{ 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>
文档
💡 使用指南
👉 查看演示 👀备用地址
👉 查看文档 👀备用地址
运行项目
安装依赖
npm install
启动本地调试
npm run serve
编译打包,生成编译后的目录:lib
npm run lib
License
MIT © 2019-present, Xu Liangzhan