2021-11-23 点击添加按钮往table表格push一条数据以及分页功能
效果：
功能描述：
添加行：点击按钮，table表格新增一条数据。
导 入： 点击导入按钮，弹出上传文件组件，这里可以导入execl格式的表格，然后把导入的数据回显到table表格中。
操作栏： 点击删除按钮， 删除table表格此行数据。
table-header 搜索框： 输入内容，搜索出相对应的数据，主要用到了数组的filter方法。
分页： 点击分页，切换上一页，下一页，显示对应的数据。
代码：
// 按钮
添加
导入
// table 表格
:data="tableData"
border
highlight-current-row
>
:key="item.prop"
show-overflow-tooltip
:prop="item.prop"
:type="item.type"
>
// 这里是table-header栏
#header="scope"> // 这里是vue3的写法，如果是用的vue2，则可以改为： slot-scope="scope"即可
{{item.label}}
v-model="form[item.prop]"
:placeholder=`输入${item.label}`
/>
// 这里是 table - 行数据
#default="scope">
// table - 操作栏
label="操作"
>
#default="scope">
删除
// 分页
:current-page="pagination.currentPage"
:page-sizes="pagination.pageSizes"
:page-size="pagination.pageSize"
:layout="pagination.layout"
:total="pagination.total"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
// 导入文件组件
title="上传文件"
:visibile.sync="dialogVisible" // 这里的dialog组件可以进行再次封装
>
:type="xxx"
@submit="uploadSubmit"
@cancel="uploadCancel"
@getImportData="getImportData"
/>
补充：这里可以看一下导入文件的组件，因为采用的是vue3的写法, 上才艺，哦不，上代码~~~
class="upload-file"
action="#"
:headers="headers"
:multiple="false"
accept=".xls,.xlsx"
:on-change="uploadChange"
:on-success="uploadSuccess"
:http-request="httpRequest"
>
将文件拖到此处，或 点击上传
下载模板
确定
取消
至此，分享完毕，vue3感觉真不戳~~