VUE3+TS+elementplus创建table，纯前端的table

news2024/11/17 22:39:08

一、前言

开始学习前端，直接从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=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”，在这里要引入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>