vue编辑表格教程学习（超高效Vuepc端表格解决方案Vxe-Table）
vue编辑表格教程学习（超高效Vuepc端表格解决方案Vxe-Table）全屏表格（表格最大化/还原）弹窗编辑表格单元格工具提示 溢出省略号...表格表头分组树形表格
今天给小伙伴们分享一款功能超强大的Vue表格组件VxeTable。
vxe-table 基于vue2.x构建的高效table表格组件，star高达2.5K 。支持行/列拖拽、排序筛选、虚拟滚动、懒加载、树形结构、xlsx导入导出、集成第三方库等功能。
- 模块化表格、按需引入，减少项目大小；
- 虚拟滚动、懒加载，渲染性能大幅提升；
- 多种主题，多图标；
- 多种表格类型（基础表格、复杂表格、树形表格、编辑表格、高级表格、大数据表格）；
- 扩展插件库；
$ npm i xe-utils vxe-table -S引入组件
import Vue from 'vue';
import 'xe-utils';
import VxeTable from 'vxe-table';
import 'vxe-table/lib/index.css';
Vue.use(VxeTable);
// 给vue挂载全局窗口实例
Vue.prototype.$modal = VxeTable.modal;
<template>
<div>
<vxe-table :data="tableData">
<vxe-table-column type="seq" title="序号" width="100"></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: 20001 name: 'Field1' role: 'Develop' sex: 'Man' address: 'Beijing' }
{ id: 20002 name: 'Field2' role: 'Test' sex: 'Woman' address: 'Guangzhou' }
{ id: 20003 name: 'Field3' role: 'PM' sex: 'Man' address: 'Shanghai' }
]
}
}
}
</script>
官网文档提供了详细的演示及API操作。
基础表格
单元格工具提示 溢出省略号...
表格表头分组
树形表格
弹窗编辑表格
全屏表格（表格最大化/还原）
集成第三方库（element-ui、iview、antd）
so good，非常实用的一款多功能表格解决方案，如果想要了解更多功能，可以自行去查阅文档。
最后附上文档及项目地址。
# 文档地址
https://xuliangzhan_admin.gitee.io/vxe-table/
# 仓库地址
https://github.com/x-extends/vxe-table
ok，就分享到这里。希望对大家有所帮助，欢迎一起交流分享技术知识！
