JavaWeb前端06（ElementPlus快速构建网页）

前言

一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了，但是我学习一直是针对后端开发的，前端也没太注重去学（他大部分都给课程资料嘻嘻🤪），但我还是比较感兴趣，准备先把之前学JavaWeb（黑马程序员新推出的哦，视频讲的非常好😗可以去看看）时跳过的前端内容学一下，然后再用苍穹外卖前端内容补上。

学完Vue工程化，但我们制作的界面还不是很美观，下面来学习ElementPlus，其实学完之后感觉前面跟白雪一样😂

来看看什么是 ElementPlus

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。

官方网站: https://element-plus.org/zh-CN/#/zh-CN

你可能会有疑问，我们前面已经学过一些组件了，那为什么还要学ElementPlus呢？原因就是她更好看，有好多彩色按钮🥰，文本框也是圆圆的。

来看一个入门程序

package.json在终端打开

根据官方文档，安装ElementPlus组件库

npm install element-plus@2.4.4 --save

在main.js 中引入ElementPlus组件库 （参照官方文档），最终 main.js 中代码如下：

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)app.mount('#app')

来从一个案例来学习ElementPlus组件

还是先来看看前端实现：

来看看代码吧

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'//表单
const emp = ref({name: '',gender: '',job: '',
})//钩子函数
onMounted(() => {search();
})//查询
const search = async () => {const url = `https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`const result = await axios.get(url)empList.value = result.data.data
}//清空
const clear = () => {emp.name = '';emp.gender = '';emp.job = '';search();
}const empList = ref([])
</script><template><!-- 搜索表单 --><div id="container"><el-form :inline="true" :model="emp" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="emp.name" placeholder="请输入姓名" clearable /></el-form-item><el-form-item label="性别"><el-select v-model="emp.gender" placeholder="请选择" clearable><el-option label="男" value="1" /><el-option label="女" value="2" /></el-select></el-form-item><el-form-item label="职位"><el-select v-model="emp.job" placeholder="请选择" clearable><el-option label="班主任" value="1" /><el-option label="讲师" value="2" /><el-option label="咨询师" value="3" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button><el-button type="primary" @click="clear">清空</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="empList" border style="width: 100%"><el-table-column prop="id" label="ID" width="80" align="center" /><el-table-column prop="name" label="姓名" width="100" align="center" /><el-table-column prop="image" label="头像" width="100" align="center" ><template #default="scope"><img :src="scope.row.image" width="50"></template></el-table-column><el-table-column prop="gender" label="性别" width="120" align="center" ><template #default="scope">{{ scope.row.gender == 1 ? '男' : '女' }}</template></el-table-column><el-table-column prop="job" label="职位" width="180" align="center" ><template #default="scope"><span v-if="scope.row.job == 1">班主任</span><span v-else-if="scope.row.job == 2">讲师</span><span v-else-if="scope.row.job == 3">咨询师</span><span v-else>其他</span></template></el-table-column><el-table-column prop="entryDate" label="入职日期" width="180" align="center" /><el-table-column prop="updatetime" label="更新时间" width="180" align="center" /></el-table></div></template><style scoped>
#container {width: 70%;margin: auto;margin-top: 100px;}</style>

里面有许多技术，axios，Css，这里只介绍ElementPlus常见组件：

<template><!-- 搜索表单 --><div id="container"><el-form :inline="true" :model="emp" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="emp.name" placeholder="请输入姓名" clearable /></el-form-item><el-form-item label="性别"><el-select v-model="emp.gender" placeholder="请选择" clearable><el-option label="男" value="1" /><el-option label="女" value="2" /></el-select></el-form-item><el-form-item label="职位"><el-select v-model="emp.job" placeholder="请选择" clearable><el-option label="班主任" value="1" /><el-option label="讲师" value="2" /><el-option label="咨询师" value="3" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button><el-button type="primary" @click="clear">清空</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="empList" border style="width: 100%"><el-table-column prop="id" label="ID" width="80" align="center" /><el-table-column prop="name" label="姓名" width="100" align="center" /><el-table-column prop="image" label="头像" width="100" align="center" ><template #default="scope"><img :src="scope.row.image" width="50"></template></el-table-column><el-table-column prop="gender" label="性别" width="120" align="center" ><template #default="scope">{{ scope.row.gender == 1 ? '男' : '女' }}</template></el-table-column><el-table-column prop="job" label="职位" width="180" align="center" ><template #default="scope"><span v-if="scope.row.job == 1">班主任</span><span v-else-if="scope.row.job == 2">讲师</span><span v-else-if="scope.row.job == 3">咨询师</span><span v-else>其他</span></template></el-table-column><el-table-column prop="entryDate" label="入职日期" width="180" align="center" /><el-table-column prop="updatetime" label="更新时间" width="180" align="center" /></el-table></div></template>

1.用于构建表单结构。

<el-form :inline="true" :model="emp" class="demo-form-inline"><el-form-item label="姓名"><!-- 输入框 --></el-form-item>
</el-form>

:inline=“true”：让表单项水平排列（行内布局）。
:model=“emp”：绑定表单数据模型，即 emp 对象。
el-form-item：每一个表单项的容器，label 属性设置标签名。

2.输入框组件，用于输入文本。

<el-input v-model="emp.name" placeholder="请输入姓名" clearable />

v-model=“emp.name”：双向绑定输入值。
placeholder：提示文字。
clearable：允许清空选择。

3.下拉选择器，用于性别和职位的选择。

<el-select v-model="emp.gender" placeholder="请选择" clearable><el-option label="男" value="1" /><el-option label="女" value="2" />
</el-select>

v-model：绑定选中的值（如 emp.gender）。
clearable：允许清空选择。
el-option：定义每一个选项。

• label：显示的文字。
• value：实际绑定的值（字符串类型）。

4.按钮组件，用于触发操作。

<el-button type="primary" @click="search">查询</el-button>
<el-button type="primary" @click="clear">清空</el-button>

type=“primary”：主按钮样式（蓝色）。
@click：绑定点击事件，如 search() 和 clear() 方法。

5.表格组件，用于展示数据列表。

<el-table :data="empList" border style="width: 100%"><!-- 列定义 -->
</el-table>

:data=“empList”：绑定表格数据源（数组）。
border：显示边框。
style=“width: 100%”：宽度占满父容器。

6.定义表格的一列。

<el-table-column prop="name" label="姓名" width="100" align="center" />

prop：对应数据对象中的字段名（如 name, gender）。
label：列标题。
width：列宽。
align=“center”：内容居中对齐。

特殊列：使用 <template #default=“scope”>
对于需要 自定义渲染内容 的列（如图片、条件显示），使用 #default 插槽：

1. 头像列（图片显示）

<el-table-column prop="image" label="头像" width="100" align="center"><template #default="scope"><img :src="scope.row.image" width="50"></template>
</el-table-column>

scope.row：当前行的数据对象。
渲染一个 标签，显示员工头像。

2. 性别列（条件显示）

<template #default="scope">{{ scope.row.gender == 1 ? '男' : '女' }}
</template>

3. 职位列（多条件判断）

<template #default="scope"><span v-if="scope.row.job == 1">班主任</span><span v-else-if="scope.row.job == 2">讲师</span><span v-else-if="scope.row.job == 3">咨询师</span><span v-else>其他</span>
</template>

使用 v-if / v-else-if 根据 job 值显示对应职位名称。

小白啊！！！写的不好轻喷啊🤯如果觉得写的不好，点个赞吧🤪（批评是我写作的动力）

…。。。。。。。。。。。…

…。。。。。。。。。。。…