什么网站可以找手工活做,公众号怎么发布,房山网站建设优化seo,网页制作素材教学一、前言
在上一篇文章中分享了创建table的过程#xff0c;详见#xff08;VUE3TSelementplus创建table#xff0c;纯前端的table#xff09;#xff0c;本文在创建好的table的基础上#xff0c;再创建一个增加按钮。
二、程序展示
1、前面创建table的程序
templ…一、前言
在上一篇文章中分享了创建table的过程详见VUE3TSelementplus创建table纯前端的table本文在创建好的table的基础上再创建一个增加按钮。
二、程序展示
1、前面创建table的程序
templatediv el-table :dataengList :header-cell-style{background:#DBDBDB, fontSize:14px, text-align:center} highlight-current-rowtruebordertruestripe stylewidth: 100% el-table-column typeindex label序号 width60 aligncenter/el-table-columnel-table-column propcarmodel label车型 width120 aligncenter/el-table-columnel-table-column propcarengmodel label发动机型号 width160 aligncenter/el-table-columnel-table-column propcarengpn label发动机物料号 width160 aligncenter/el-table-columnel-table-column propcarengsn label发动机序号 width160 aligncenter/el-table-columnel-table-column propcareng_remark label备注 widthauto/el-table-columnel-table-column propcareng_creator label创建人 width100 aligncenter/el-table-columnel-table-column propcareng_creat_time label创建时间 width120 aligncenter/el-table-columnel-table-column propcareng_revision_by label修改人 width100 aligncenter/el-table-columnel-table-column propcareng_rev_time label修改时间 width120 aligncenter/el-table-column/el-table/div
/templatescript setup lang tsimport {ElTable, ElTableColumn} from element-plusconst engList [{carmodel: 熊猫,carengmodel: WLZY01,carengpn: GD15T,carengsn: 20220511ASD,careng_remark: 升级款,careng_creator: 张三,careng_creat_time: 2024-5-23,careng_revision_by: ,careng_rev_time: ,}]/scriptstyle
/style2、在table上面添加增加按钮
templatediv div styletext-align: right;el-button typesuccess 增加/el-button/divel-table:dataengList :header-cell-style{background:#DBDBDB, fontSize:14px, text-align:center} highlight-current-rowtruebordertruestripe stylewidth: 100% el-table-column typeindex label序号 width60 aligncenter/el-table-columnel-table-column propcarmodel label车型 width120 aligncenter/el-table-columnel-table-column propcarengmodel label发动机型号 width160 aligncenter/el-table-columnel-table-column propcarengpn label发动机物料号 width160 aligncenter/el-table-columnel-table-column propcarengsn label发动机序号 width160 aligncenter/el-table-columnel-table-column propcareng_remark label备注 widthauto/el-table-columnel-table-column propcareng_creator label创建人 width100 aligncenter/el-table-columnel-table-column propcareng_creat_time label创建时间 width120 aligncenter/el-table-columnel-table-column propcareng_revision_by label修改人 width100 aligncenter/el-table-columnel-table-column propcareng_rev_time label修改时间 width120 aligncenter/el-table-column/el-table/div
/templatescript setup lang tsimport {ElTable, ElTableColumn} from element-plusimport {ref} from vueconst engList [{carmodel: 熊猫,carengmodel: WLZY01,carengpn: GD15T,carengsn: 20220511ASD,careng_remark: 升级款,careng_creator: 张三,careng_creat_time: 2024-5-23,careng_revision_by: ,careng_rev_time: ,}]/scriptstyle
/stylecnpm run dev一下执行结果为 看起来不是很美观给它来点颜色再调整下位置让它右对齐。 颜色是通过type类型来选的位置通过给它加个外框然后右对齐来实现的。执行结果如下 我们在编写代码的时候可以打开elementplus的主页在里面去看别人的样例是怎么写的然后自己就会使用了。其他的按钮都类似直接修改一个名字就可以。各种形状的按钮也可以根据官网给的属性进行调整。
elementplus官网
