前言

这是一个基于Vue的表格框架。
VXE Table 是一个基于Vue的表格框架，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等。

VXE Table面向现代浏览器，高效的简洁 API 设计，模块化表格、按需加载、扩展接口，为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能。

准备工作

引入vxe-table

      import VXETable from 'vxe-table'

基础表格实现

话不多说，直接上代码:
在Template 中的div中直接粘贴

        <vxe-toolbar>
          <template #buttons>
            <vxe-button @click="allAlign = 'left'">居左</vxe-button>
            <vxe-button @click="allAlign = 'center'">居中</vxe-button>
            <vxe-button @click="allAlign = 'right'">居右</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          :align="allAlign"
          :data="tableData">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="Name"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex"></vxe-table-column>
          <vxe-table-column field="age" title="Age"></vxe-table-column>
        </vxe-table>

在script中粘贴如下：

 export default {
  data () {
    return {
      allAlign: null,
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ]
    }
  }
}

如果你进行了如上操作效果马上出来，如图：

图片.png

这样一个最基本的基础vxe-table就出来了

感兴趣可以访问下vxe-table的API文档

······························续更中···········································