vx-table

前言

一个基于 vxe-table 二次封装的表格组件，适用于 vue2.0

功能点

• 只读模式
• 编辑模式
• 分页
• 列合计 / 总合计
• 复选框
• 复选框逻辑禁用
• 复选框自定义
• 展开
• 多表头
• 键盘 Tab 切换 / 单击触发 编辑
• 验证

安装

1npm install vxe-table@3.6.13 vxe-table-plugin-element@3.0.7 element-ui@2.5.14 vx-table

npm

1// 引入 element-ui
2import ElementUI from 'element-ui'
3import 'element-ui/lib/theme-chalk/index.css'
4Vue.use(ElementUI)
5
6// 引入 vxe-table
7import VXETable from 'vxe-table'
8import 'vxe-table/lib/style.css'
9Vue.use(VXETable)
10
11// 引入 vxe-table 插件 兼容 编辑模式下支持 element-ui 组件
12import VXETablePluginElement from 'vxe-table-plugin-element'
13import 'vxe-table-plugin-element/dist/style.css'
14VXETable.use(VXETablePluginElement)
15
16// 引入 vx-table 组件
17import VxTable from 'vx-table'
18import 'vx-table/dist/vxTable.css'
19Vue.use(VxTable)
20

示例

所有示例

1<template>
2    <div>
3    	<vx-table :data="data" :columns="columns"></vx-table>
4    </div>
5</template>
6
7<script>
8export default {
9	name: 'App',
10	components: { VxTable },
11	data() {
12		return {
13			data: [{ id: 1, name: 'JC', age: 18, amount: 8568.87656 }],
14            columns: [
15				{
16					label: '姓名',
17					prop: 'name'
18				},
19				{
20					label: '年龄',
21					prop: 'age'
22				},
23				{
24					label: '余额',
25					prop: 'amount',
26					format: { type: 'number', digits: 2, prefix: '￥' }
27				}
28			],
29		}
30	}
31}
32</script>

运行项目

1// 安装依赖
2npm install
3
4// 运行本地调试
5npm run serve
6
7// 编译打包，生成 dist 编译目录
8npm run lib

源码

vx-table

License

MIT © 2023-present, Jason Chen