初学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文件添加如下代码：

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="序号" width="80"></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: '名字1',
          role: '角色',
          sex: '男',
          address: '深圳市 圳市 市 xxx'
        }
      ]
    }
  }
}
</script>
<style scoped>

.table01{

  width: 80%;

  margin: auto;

}
</style>

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

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