毕节网站怎么做seo,html代码特效银河系,移动互联网开发技术电子书,哪个网站可以做印章图案一、前言
开始学习前端#xff0c;直接从VUE3开始#xff0c;从简单的创建表格开始。因为自己不是专业的程序员#xff0c;编程主要是为了辅助自己的工作#xff0c;提高工作效率#xff0c;VUE的基础知识并不牢固#xff0c;主要是为了快速上手#xff0c;能够做出一些…一、前言
开始学习前端直接从VUE3开始从简单的创建表格开始。因为自己不是专业的程序员编程主要是为了辅助自己的工作提高工作效率VUE的基础知识并不牢固主要是为了快速上手能够做出一些东西出来。
二、程序展示
1、程序说明
使用VUE3elementplus创建一个table业务场景是进行汽车发动机型号注册本文先从创建一个table开始后续再联动后端再增删改查。
2、main.ts的内容
import { createApp } from vue
import App from ./App.vue
import ElementPlus from element-plusconst app createApp(App)
app.use(ElementPlus,{ locale: zhCn,})..mount(#app)在这里主要是要引入elementplus{ locale: zhCn,}这个作用是使用elementplus的中文版。
3、创建页面
创建一个vueStudy的页面在template里创建表格。
templatedivel-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
/template在script里要加上setup lang “ts”在这里要引入eltable。
script 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: ,}]/script样式里可以不做调整先按默认的来就行。
style
/style在终端cnpm run dev一下最后的结果 创建table成功初始化的值在页面上成功展示出来。
