基于Vue开源的高效复杂表格解决方案——「vxe-table」
背景在目前大多数情况下,越来越多拥有开发团队的公司使用Vue作为他们的前端开发框架,我们不得不承认Vue这种模式在很多地方是优于传统项目的,但是相信很多人会和笔者一样,在使用过程中,事物总不是想象中那么美好,其中有一项就和今天的主角有关,在组件方面,以往jQuery的方式存在大量的第三方组件,能应对很多复杂的业务场景,就比如表格组件。虽然普通的表格能满足普通的开发需求,但是遇到复杂的就会显得捉襟见
背景
在目前大多数情况下,越来越多拥有开发团队的公司使用Vue作为他们的前端开发框架,我们不得不承认Vue这种模式在很多地方是优于传统项目的,但是相信很多人会和笔者一样,在使用过程中,事物总不是想象中那么美好,其中有一项就和今天的主角有关,在组件方面,以往jQuery的方式存在大量的第三方组件,能应对很多复杂的业务场景,就比如表格组件。虽然普通的表格能满足普通的开发需求,但是遇到复杂的就会显得捉襟见肘,遇到一个开源的在Vue中相当好用的一个表格组件——vxe-table!
开源仓库(MIT)
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、非常灵活的配置项、扩展接口等…
https://github.com/xuliangzhan/vxe-table
https://gitee.com/xuliangzhan_admin/vxe-table
功能
目前vxe-table已经来到3.x版本,以下是文档中所说明的功能,可以说是非常丰富了,基本上满足大多数复杂业务场景(比如说大型ERP系统,对于表格要求非常高的场景)
基础表格、高级表格、斑马线条纹、多种边框、单元格样式、列宽拖动、最大高度、自适应宽高、固定列、多级表头、表尾数据、高亮行、列、序号、单选框、复选框、下拉选项、开关、排序、筛选、合并行或列、导入、导出、打印、显示/隐藏列、加载中、格式化内容、自定义插槽/模板、快捷菜单、展开行、分页、表单、工具栏、下拉容器、虚拟列表、增删改查、树表格、数据校验、数据代理、键盘导航、模态窗口、渲染器、虚拟滚动
组件模块
以下是其核心组件模块,且可以和国内主流组件框架适配
• 核心 (表格)
• 可选模块 (图标)、(表头)、(表尾)、(筛选)、(提示信息)、(快捷菜单)、(导出)、(按键导航)
• 可选组件 (高级表格)、(静态列)、(虚拟列表)、(表单)、(分页)、(工具栏)(复选框)、(单选框)、(输入框)、(下拉框)、(开关)、(模态窗口)、(按钮)(下拉容器)
• 可选插件增强插件 (PDF 导出插件) 、(XLSX 导出插件) 、(快捷菜单插件)
• 适配插件 (element-ui 适配插件)、 (iview 适配插件)、 (ant-design-vue 适配插件)
安装配置
vex-table依赖库:vue 2.6+, xe-utils 2.4+,根据习惯使用npm或者yarn
npm install xe-utils vxe-table
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(VXETable)
<template>
<div>
<vxe-table :data="tableData">
<vxe-table-column type="seq" title="排序" width="60"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="sex" title="性别"></vxe-table-column>
<vxe-table-column field="address" title="地址"></vxe-table-column>
</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>
兼容性
在3.0版本及以后不再支持IE,2.0以及之前版本支持所有主流浏览器
总结
vxe-table确实是一个非常不错的表格组件,而且一直在不断的更新优化维护,具体可以参考仓库或者文档,有详细的使用指南和文档说明。
更多推荐
所有评论(0)