前言
这是一个基于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文档
