一、前言
開始學習前端，直接從VUE3開始，從簡單的創建表格開始。因為自己不是專業的程序員，編程主要是為了輔助自己的工作，提高工作效率，VUE的基礎知識并不牢固，主要是為了快速上手，能夠做出一些東西出來。
二、程序展示
1、程序說明
使用VUE3，elementplus，創建一個table，業務場景是進行汽車發動機型號注冊，本文先從創建一個table開始，后續再聯動后端，再增刪改查。
2、main.ts的內容
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'const app = createApp(App)
app.use(ElementPlus,{ locale: zhCn,})..mount('#app')
在這里主要是要引入elementplus，{ locale: zhCn,}這個作用是使用elementplus的中文版。
3、創建頁面
創建一個vueStudy的頁面，在template里創建表格。
<template><div><el-table:data="engList" :header-cell-style="{background:'#DBDBDB', fontSize:'14px', 'text-align':'center'}" highlight-current-row=trueborder=truestripe 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”，在這里要引入eltable。
<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>
在終端cnpm run dev一下，最后的結果：
創建table成功，初始化的值在頁面上成功展示出來。
