初学vxe-table日记

珊妹儿又在研究一前端组件了，名为vxe-table,一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、 数据校验、树形结构、打印导出、表单渲染、 数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、        扩展接口等...

vxe-table使用场景：
    1.需要实现不同单元格编辑组件（比如：输入框、下拉框、日期选择等…）
    2.需要定制高级筛选（比如：实现类似 Excel 筛选框或定制更加强大自定义筛选等…）
    3.业务太多，构建可复用的渲染器
    4.一键生成可配置化表格等
    5.与任意组件库兼容

提供了各类操作表格的方法，相关链接如下

git：https://gitee.com/xuliangzhan_admin/vxe-table

文档：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api

因为它是基于vue的组件，那么我们来嵌入到vue项目中，首先使用npm安装:

npm install xe-utils vxe-table

然后在项目文件main.js中添加如下代码：

import 'xe-utils'

import VXETable from 'vxe-table'

import 'vxe-table/lib/index.css'

Vue.use(VXETable)

新建vue文件添加如下代码：

然后根据路径去配置router/index.js，启动项目去访问新添加的页面就会生成一个简单的表格

今天是vue嵌入vxe-table的学习，如果珊妹儿确定接下来的项目使用这个组件的话，关于vxe-table的学习还会持续更新的，作为自己学习的记录，如果有幸能帮助到大家，那珊妹儿会更开心的~