一、前言
在上一篇文章中分享了创建table的过程，详见（VUE3+TS+elementplus创建table，纯前端的table），本文在创建好的table的基础上，再创建一个增加按钮。
二、程序展示
1、前面创建table的程序
<template>
<div >
<el-table
:data="engList"
:header-cell-style="{background:'#DBDBDB', fontSize:'14px', 'text-align':'center'}"
highlight-current-row=true
border=true
stripe
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="carmodel" label="车型" width="120" align="center"></el-table-column>
<el-table-column prop="carengmodel" label="发动机型号" width="160" align="center"></el-table-column>
<el-table-column prop="carengpn" label="发动机物料号" width="160" align="center"></el-table-column>
<el-table-column prop="carengsn" label="发动机序号" width="160" align="center"></el-table-column>
<el-table-column prop="careng_remark" label="备注" width="auto"></el-table-column>
<el-table-column prop="careng_creator" label="创建人" width="100" align="center"></el-table-column>
<el-table-column prop="careng_creat_time" label="创建时间" width="120" align="center"></el-table-column>
<el-table-column prop="careng_revision_by" label="修改人" width="100" align="center"></el-table-column>
<el-table-column prop="careng_rev_time" label="修改时间" width="120" align="center"></el-table-column>
</el-table>
</div>
</template>
<script setup lang = "ts">
import {ElTable, ElTableColumn} from 'element-plus'
const engList = [
{
carmodel: '熊猫',
carengmodel: 'WLZY01',
carengpn: 'GD15T',
carengsn: '20220511ASD',
careng_remark: '升级款',
careng_creator: '张三',
careng_creat_time: '2024-5-23',
careng_revision_by: '',
careng_rev_time: '',
}
]
</script>
<style>
</style>
2、在table上面添加增加按钮
<template>
<div >
<div style="text-align: right;">
<el-button type="success" >增加</el-button>
</div>
<el-table
:data="engList"
:header-cell-style="{background:'#DBDBDB', fontSize:'14px', 'text-align':'center'}"
highlight-current-row=true
border=true
stripe
style="width: 100%"
>
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="carmodel" label="车型" width="120" align="center"></el-table-column>
<el-table-column prop="carengmodel" label="发动机型号" width="160" align="center"></el-table-column>
<el-table-column prop="carengpn" label="发动机物料号" width="160" align="center"></el-table-column>
<el-table-column prop="carengsn" label="发动机序号" width="160" align="center"></el-table-column>
<el-table-column prop="careng_remark" label="备注" width="auto"></el-table-column>
<el-table-column prop="careng_creator" label="创建人" width="100" align="center"></el-table-column>
<el-table-column prop="careng_creat_time" label="创建时间" width="120" align="center"></el-table-column>
<el-table-column prop="careng_revision_by" label="修改人" width="100" align="center"></el-table-column>
<el-table-column prop="careng_rev_time" label="修改时间" width="120" align="center"></el-table-column>
</el-table>
</div>
</template>
<script setup lang = "ts">
import {ElTable, ElTableColumn} from 'element-plus'
import {ref} from 'vue'
const engList = [
{
carmodel: '熊猫',
carengmodel: 'WLZY01',
carengpn: 'GD15T',
carengsn: '20220511ASD',
careng_remark: '升级款',
careng_creator: '张三',
careng_creat_time: '2024-5-23',
careng_revision_by: '',
careng_rev_time: '',
}
]
</script>
<style>
</style>
cnpm run dev一下，执行结果为：
看起来不是很美观，给它来点颜色，再调整下位置，让它右对齐。
颜色是通过type类型来选的，位置通过给它加个外框，然后右对齐来实现的。执行结果如下：
我们在编写代码的时候，可以打开elementplus的主页，在里面去看别人的样例是怎么写的，然后自己就会使用了。其他的按钮都类似，直接修改一个名字就可以。各种形状的按钮也可以根据官网给的属性进行调整。
elementplus官网：
