https://github.com/jcyicai/vx-table
基于 vxe-table 二次封装的表格组件，适用于 vue2.0
https://github.com/jcyicai/vx-table
element-ui vue2 vx-table vxe-table
Last synced: about 1 month ago
JSON representation
基于 vxe-table 二次封装的表格组件，适用于 vue2.0
- Host: GitHub
- URL: https://github.com/jcyicai/vx-table
- Owner: jcyicai
- License: mit
- Created: 2023-09-01T02:20:31.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-10T06:03:12.000Z (almost 2 years ago)
- Last Synced: 2025-04-19T12:16:31.345Z (about 2 months ago)
- Topics: element-ui, vue2, vx-table, vxe-table
- Language: Vue
- Homepage:
- Size: 1010 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vx-table
## 前言
一个基于 vxe-table 二次封装的表格组件，适用于 vue2.0
## 功能点
- [x] 只读模式
- [x] 编辑模式
- [x] 分页
- [x] 列合计 / 总合计
- [x] 复选框
- [x] 复选框逻辑禁用
- [x] 复选框自定义
- [x] 展开
- [x] 多表头
- [x] 键盘 Tab 切换 / 单击触发 编辑
- [x] 验证
## 安装
```shell
npm install [email protected] [email protected] [email protected] vx-table
```
## npm
```javascript
// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
// 引入 vxe-table
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
// 引入 vxe-table 插件 兼容 编辑模式下支持 element-ui 组件
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'
VXETable.use(VXETablePluginElement)
// 引入 vx-table 组件
import VxTable from 'vx-table'
import 'vx-table/dist/vxTable.css'
Vue.use(VxTable)
```
## 示例
[所有示例](https://github.com/jcyicai/vx-table/blob/main/src/App.vue)
```vue
export default {
name: 'App',
components: { VxTable },
data() {
return {
data: [{ id: 1, name: 'JC', age: 18, amount: 8568.87656 }],
columns: [
{
label: '姓名',
prop: 'name'
},
{
label: '年龄',
prop: 'age'
},
{
label: '余额',
prop: 'amount',
format: { type: 'number', digits: 2, prefix: '￥' }
}
],
}
}
}
```
## 运行项目
```shell
// 安装依赖
npm install
// 运行本地调试
npm run serve
// 编译打包，生成 dist 编译目录
npm run lib
```
## 源码
[vx-table](https://github.com/jcyicai/vx-table)
## License
[MIT](LICENSE) © 2023-present, Jason Chen