一、概述
1.1介绍
Element Plus 基本使用
element-ui 是基于vue 开发的一套ui组件库，提供丰富的网页开发组件，可用快速开发网站，降低前端开发成本
版本 element目前有两个版本
- element-ui：基于vue2
- element-plus: 基于vue3
官网地址
https://element-plus.org/zh-CN/element-plus 基本使用
1.安装 npm install element-plus 2. 在vue项目main.js引入element-plus组件，以及css文件 3. 在官方文档中找到需要的样式组件复制代码对应的.vue中使用。
具体部署请看快速开始
1.2网页基础布局
icon组件
安装
pnpm install @element-plus/icons-vue在main.ts中进行全局挂载
官网图标地址
https://element-plus.org/zh-CN/component/icon.html#
Container 布局容器
<div class="common-layout">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</div>我们将这个布局抽离为两个组件，分别为一个header组件和一个aside组件，接下来开始抽离。
模板组件分离
header组件
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<template>
<div>
<el-header style="display: flex; font-size: 16px;">
<!-- 左侧部分，包含侧边栏展开/折叠图标 -->
<div style="display: inline-flex; flex: 1; align-items: center; justify-content: left;">
<!-- 展开图标（非折叠状态时显示） -->
<el-icon v-show="!showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
<Fold />
</el-icon>
<!-- 折叠图标（折叠状态时显示） -->
<el-icon v-show="showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
<Expand />
</el-icon>
</div>
<!-- 右侧工具栏区域 -->
<div class="toolbar">
<!-- 用户头像 -->
<div class="block" style="margin-right: 10px;">
<el-avatar :size="40" :src="Avatar" />
</div>
<!-- 用户名文本 -->
<span>管理员</span>
<!-- 下拉菜单，包含更多操作选项 -->
<el-dropdown trigger="click">
<!-- 设置图标 -->
<el-icon style="margin-left: 18px; margin-top: 1px; color: #303133;">
<setting />
</el-icon>
<!-- 下拉菜单内容模板 -->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
</div>
</template>
<script setup lang="ts">
import Avatar from '@/assets/touxiang.jpg'
import { ref } from 'vue'
// eslint-disable-next-line vue/no-dupe-keys, @typescript-eslint/no-unused-vars
const isCollapse = ref(true)
// 获取父组件传递过来的数据
const showIcon = defineProps({
isCollapse: Boolean
})
// 获取父组件自定义的事件
const emit = defineEmits(['changeAside'])
// 自定义按钮点击事件，侧边栏的收缩按钮
const collapseAside = () => {
emit('changeAside')
}
// 登出按钮
const LogOut = ()=>{
}
</script>
<style>
.el-header {
width: 100%;
background-color: #fff;
color: var(--el-text-color-primary);
box-shadow: var(--el-box-shadow);
}
.toolbar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
right: 20px;
text-align: right;
}
.el-dropdown-menu__item {
width: 120px;
}
.icon-color {
color: white;
}
</style>aside组件
<script setup>
import { Monitor } from '@element-plus/icons-vue';
import { ref } from 'vue'
const settings = defineProps({
collapse: Boolean,
width: String
})
const iconColor = ref('color:#F8FAFB')
</script>
<template>
<el-aside :width="settings.width">
<el-scrollbar>
<el-menu :default-openeds="['1', '3']"
:collapse="settings.collapse" active-text-color="#ffd04b"
background-color="#304156" text-color="#FFFFFF" router="true">
<el-menu-item index="1">
<el-icon><Monitor /></el-icon>
<template #title>仪表板</template>
</el-menu-item>
<el-sub-menu index="2">
<template #title>
<el-icon>
<Menu />
</el-icon><span>文章管理</span>
</template>
<el-menu-item index="/admin/articles">文章管理列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<el-icon>
<Message />
</el-icon><span>评论管理</span>
</template>
<el-menu-item index="/admin/comments">评论管理列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="4">
<template #title>
<el-icon>
<Files />
</el-icon><span>模块管理</span>
</template>
<el-menu-item index="/admin/blocks">模块管理列表</el-menu-item>
</el-sub-menu>
</el-menu>
</el-scrollbar>
</el-aside>
</template>
<style scoped>
.el-aside {
height: 100vh;
overflow: hidden;
box-shadow: var(--el-box-shadow-lighter);
}
.el-scrollbar {
height: 100vh;
overflow: hidden;
background-color: #304156;
}
.el-menu {
border-right: none;
}</style>动态路由
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: '仪表盘',
component: HomeView
},
{
path: '/article',
name: '文章管理',
component: HomeView,
children: [
{
path: '/id',
name: '文章管理列表',
component: () => (
'../views/A.vue'
)
}
]
},
{
path: '/comment',
name: '评论管理',
component: HomeView,
children: [
{
path: '/id',
name: '评论管理列表',
component: () => (
'../views/B.vue'
)
}
],
},
]
})
export default router
侧边栏代码改进
<template>
<el-aside :width="settings.width">
<el-scrollbar>
<el-menu :default-openeds="['1', '3']"
:collapse="settings.collapse" active-text-color="#ffd04b"
background-color="#304156" text-color="#FFFFFF" router="true">
<template v-for="menu in this.$router.options.routes" :key="menu">
<!-- 当前菜单项没有子菜单时 -->
<el-menu-item v-if="!menu.children" :index="menu.path">
<el-icon><component :is="menu.icon" ></component> </el-icon>
<span>{{menu.name}}</span>
</el-menu-item>
<!-- 当前菜单项有子菜单时 -->
<el-sub-menu v-else-if="menu.children" :index="menu.path">
<template #title>
<el-icon><component :is="menu.icon" ></component> </el-icon>
<span>{{menu.name}}</span>
</template>
<!-- 循环遍历子菜单项 -->
<el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{{child.name}}</el-menu-item>
</el-sub-menu>
</template>
- Element Plus Icon组件：如果你正在使用 Element Plus UI 库，你可以直接使用其提供的 Icon 组件来显示图标。你可以在路由配置中使用该组件作为路由菜单的一部分，例如在
meta字段中定义图标名称，然后在导航菜单的组件中动态渲染它。- SVG图标：你可以使用 SVG 格式的图标，并在你的 Vue 组件中直接引入它们。这种方法允许你在路由配置中指定不同的 SVG 文件，并在导航菜单中显示它们。
- @iconify/vue：这是一个流行的图标库，提供了多种图标集的支持。你可以通过这个库来在你的 Vue 项目中使用图标，包括在路由中。你可以选择适合你项目的图标集，并在路由配置中指定相应的图标类名。
整合
<script setup>
import { ref } from 'vue'
// 组件注册
import Header from '@/components/Header.vue'
import Aside from '@/components/Aside.vue'
const asideSettings = ref({
isCollapse:true,
width:'200'
})
// 给子组件绑定事件，通过子组件emit从而改变父组件的值
const changeAside = ()=>{
asideSettings.value.isCollapse = !asideSettings.value.isCollapse
if(asideSettings.value.isCollapse){
asideSettings.value.width = "64"
}else{
asideSettings.value.width = "200"
}
}
</script>
<template>
<el-container style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
<Aside :collapse="asideSettings.isCollapse" :width="asideSettings.width"></Aside>
<el-container style="height: 100vh;width:100%;display: flex;flex-direction: column;">
<Header :isCollapse="asideSettings.isCollapse" @changeAside="changeAside"></Header>
<el-main>
<div v-if="$route.path === '/'">
<el-card>
<h1>文本内容</h1>
</el-card>
</div>
<router-view v-else></router-view>
</el-main>
</el-container>
</el-container>
</template>
<style scoped>
body{
background-color: #eee;
max-width: 100vw;
overflow: hidden;
}
.el-main {
width: 100%;
padding: 0;
height: 100vh;
overflow-x: hidden;
}
</style>
二、Element Plus 基本样式
2.1按钮
<template>
<h3>按钮</h3>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<hr>
<h3>按钮属性</h3>
<el-button plain>朴素按钮</el-button>
<el-button round>圆角按钮</el-button>
<el-button circle>圆</el-button>
<el-button disabled>禁用按钮</el-button>
<el-button loading>加载中</el-button>
<hr>
<h3>尺寸</h3>
<el-button size="large">大型按钮</el-button>
<el-button>默认按钮</el-button>
<el-button size="small">小型按钮</el-button>
</template>
2.2图标
<template>
<h3>图标</h3>
<el-icon><Plus /></el-icon>
<el-icon><Edit /></el-icon>
<el-icon><Delete /></el-icon>
<el-icon class="is-loading"><Loading /></el-icon>
<hr>
<h3>属性</h3>
<el-icon size="30" color="red"><Search /></el-icon>
<hr>
<h3>按钮</h3>
<el-button type="primary">
<el-icon><Search /></el-icon>
<span> 搜索 </span>
</el-button>
<el-button type="primary">
<el-icon><Search /></el-icon>
</el-button>
<el-button type="primary" circle>
<el-icon><Search /></el-icon>
</el-button>
<hr>
<h3>按钮组</h3>
<el-button-group>
<el-button type="primary">
<el-icon><Plus /></el-icon>
</el-button>
<el-button type="primary">
<el-icon><Edit /></el-icon>
</el-button>
<el-button type="primary">
<el-icon><Delete /></el-icon>
</el-button>
</el-button-group>
</template>
2.3提示框
<script setup lang="ts">
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
// 消息
const openMsg = () => {
ElMessage({
type: 'success', // success | warning | info | error
message: 'hello world',
showClose: true
})
}
// 确认框
const openConfirm = () => {
ElMessageBox.confirm('确认删除?', '标题', {
type: 'warning',
confirmButtonText: '确认',
cancelButtonText: '取消'
}).then(() => {
console.log('确认')
}).catch(() => {
console.log('取消')
})
}
// 通知
const openNotifiy = () => {
ElNotification({
title: '标题',
message: '烟雨平生',
duration: 1500 // 展示时间 [单位:毫秒]
})
}
// 通知2
const openNotifiy2 = () => {
ElNotification({
type: 'success', // success | warning | info | error
title: '标题',
message: 'hello world',
duration: 1500,
position: 'bottom-right'
})
}
</script>
<template>
<div>
<el-button @click="openMsg">消息</el-button>
<el-button @click="openConfirm">确认框</el-button>
<el-button @click="openNotifiy">通知</el-button>
<el-button @click="openNotifiy2">通知2</el-button>
</div>
</template>
2.4导航
详情请见导航
2.5标签页
标签页详情请见标签页
<script setup lang="ts">
import { ref, reactive } from 'vue'
//默认选中的标签名称
const selectedName = ref("2")
//选中标签触发的回调
const tabClick = (tab, event) => {
console.log("tab", tab.props, "event", event)
}
const tab = reactive({
arr: [
{ name: "1", title: '烟雨', content: '内容1' },
{ name: "2", title: '烟雨平生', content: '内容2' },
{ name: "3", title: 'com', content: '内容3' },
]
})
//添加
const tabAdd = () => {
let index = tab.arr.length
index++
tab.arr.push({
name: index,
title: '新选项卡' + index,
content: '内容' + index
})
}
//移除
const tabRemove = (name) => {
console.log("name:", name)
const index = tab.arr.findIndex((value) => {
return value.name === name
})
tab.arr.splice(index, 1) //移除元素
}
</script>
<template>
<div>
<h3>标签页</h3>
<el-tabs v-model="selectedName" @tab-click="tabClick">
<el-tab-pane label="烟雨" name="1">内容1</el-tab-pane>
<el-tab-pane label="烟雨平生" name="2">内容2</el-tab-pane>
<el-tab-pane label="com" name="3">内容3</el-tab-pane>
</el-tabs>
<h3>卡片风格</h3>
<el-tabs v-model="selectedName" @tab-click="tabClick" type="card">
<el-tab-pane label="烟雨" name="a">内容1</el-tab-pane>
<el-tab-pane label="烟雨平生" name="b">内容2</el-tab-pane>
<el-tab-pane label="com" name="c">内容3</el-tab-pane>
</el-tabs>
<h3>带有边框的卡片风格</h3>
<el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
<el-tab-pane label="烟雨" name="A">内容1</el-tab-pane>
<el-tab-pane label="烟雨平生" name="B">内容2</el-tab-pane>
<el-tab-pane label="com" name="C">内容3</el-tab-pane>
</el-tabs>
<h3>动态添加</h3>
<el-button @click="tabAdd">添加</el-button>
<el-tabs v-model="selectedName" @tab-remove="tabRemove" closable type="card">
<el-tab-pane v-for="(value, key) in tab.arr" :key="value.name" :label="value.title" :name="value.name">
{{ value.content }}
</el-tab-pane>
</el-tabs>
</div>
</template>
2.6输入框
详情请见输入框
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('')
const password = ref('')
const content = ref('烟雨平生')
const url = ref('com')
const url2 = ref('code')
const email = ref('123456')
//const selected = ref('')
const selected = ref('2') //选中的下拉框
</script>
<template>
<div style="width: 300px;">
<!-- clearable 可一键清空 -->
<h3>输入框</h3>
<el-input v-model="name" clearable placeholder="请输入用户名" />
<!-- show-password 可切换显示隐藏密码 -->
<h3>密码框</h3>
<el-input v-model="password" show-password placeholder="请输入密码" />
<h3>文本域</h3>
<el-input type="textarea" v-model="content" rows="2" />
<h3>输入内容长度限制 - 输入框</h3>
<el-input v-model="name" maxlength="10" show-word-limit />
<h3>输入内容长度限制 - 文本域</h3>
<el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />
<h3>尺寸</h3>
大 <el-input size="large" />
默认 <el-input />
小 <el-input size="small" />
<h3>前置</h3>
<el-input v-model="url">
<template #prepend>https://</template>
</el-input>
<h3>后置</h3>
<el-input v-model="email">
<template #append>@qq.com</template>
</el-input>
<h3>前置后置</h3>
<el-input v-model="url2">
<template #prepend>https://</template>
<template #append>.com</template>
</el-input>
<h3>前置后置扩展 - 搜索</h3>
<el-input placeholder="请输入课程名称">
<template #prepend>
<el-select v-model="selected" placeholder="请选择" style="width: 100px;">
<el-option label="前端" value="1" />
<el-option label="后端" value="2" />
<el-option label="服务端" value="3" />
</el-select>
</template>
<template #append>
<el-button>
<el-icon><Search /></el-icon>
</el-button>
</template>
</el-input>
</div>
</template>2.7单选框、复选框
详情请见单选框
多选框
2.8下拉框
详情请见下拉选择器
<script setup lang="ts">
import { ref,reactive } from 'vue'
const selected = ref('2')
const selected2 = ref('')
const selected3 = ref('C')
const selected4 = ref(['1','3'])
const data = reactive({
options: [
{ value: 'A', label: '前端', },
{ value: 'B', label: '后端', },
{ value: 'C', label: '服务端', }
]
})
//回调
const selectChange = (val) => {
console.log("selectChange:", val)
}
</script>
<template>
<div style="width: 300px;">
<h3>下拉框</h3>
<el-select v-model="selected" placeholder="请选择">
<el-option value="1" label="前端" />
<el-option value="2" label="后端" />
<el-option value="3" label="服务端" />
</el-select>
<h3>下拉框 - 事件绑定</h3>
<el-select v-model="selected2" @change="selectChange" placeholder="请选择">
<el-option value="a" label="前端" />
<el-option value="b" label="后端" />
<el-option value="c" label="服务端" />
</el-select>
<h3>动态下拉框</h3>
<el-select v-model="selected3" placeholder="请选择">
<el-option v-for="item in data.options"
:value="item.value"
:label="item.label"
:key="item.value" />
</el-select>
<h3>多选 - multiple</h3>
<el-select v-model="selected4" multiple @change="selectChange" placeholder="请选择">
<el-option value="1" label="前端" />
<el-option value="2" label="后端" />
<el-option value="3" label="服务端" />
</el-select>
</div>
</template>2.9日期选择器
详情请见日期选择器
2.10表单
2.11对话框
详情请见对话框
<script setup>
import { ref } from 'vue'
const data = ref({
name: '',
radio: '',
checkbox: [],
date: '',
select: '',
multipleSelect: [],
textarea: ''
})
const add = () => {
console.log(data.value)
}
const reset = () => {
data.value = {
name: '',
radio: '',
checkbox: [],
date: '',
select: '',
multipleSelect: [],
textarea: ''
}
}
//对话框
const dialog = ref(false)
const dialogClose = () => {
console.log("关闭")
}
</script>
<template>
<el-button @click="dialog = true">打开</el-button>
<!-- draggable 允许拖拽 -->
<el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
<el-form label-width="80">
<el-form-item label="文本框">
<el-input v-model="data.name" placeholder="请填写名称" />
</el-form-item>
<el-form-item label="单选框">
<el-radio-group v-model="data.radio">
<el-radio value="1">前端</el-radio>
<el-radio value="2">后端</el-radio>
<el-radio value="3">服务端</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="复选框">
<el-checkbox-group v-model="data.checkbox">
<el-checkbox value="a">前端</el-checkbox>
<el-checkbox value="b">后端</el-checkbox>
<el-checkbox value="c">服务端</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="日期时间">
<el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
<el-form-item label="下拉框">
<el-select v-model="data.select" placeholder="请选择">
<el-option value="A" label="前端" />
<el-option value="B" label="后端" />
<el-option value="C" label="服务端" />
</el-select>
</el-form-item>
<el-form-item label="多选框">
<el-select v-model="data.multipleSelect" multiple placeholder="请选择">
<el-option value="AA" label="前端" />
<el-option value="BB" label="后端" />
<el-option value="CC" label="服务端" />
</el-select>
</el-form-item>
<el-form-item label="文本域">
<el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add">添加</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
2.12表格
详情请见表格
三、实战进阶
3.1设置布局
栅格布局：通过基础的24分栏，迅速便捷创建布局，
el-row 代表行，里面嵌套el-col
el-col 代表列，总分为24列
属性
gutter列间隔
span占据的列数
<script setup>
import { ref } from 'vue'
</script>
<template>
<div>
<h3>这是A页面的栅格</h3>
<el-row :gutter="10">
<el-col :span="12">
<div style="background: green">第一列</div>
</el-col>
<el-col :span="12">
<div style="background: orange">第二列</div>
</el-col>
</el-row>
<br>
<el-row :gutter="10">
<el-col :span="8">
<div style="background: green">第一列</div>
</el-col>
<el-col :span="8">
<div style="background: orange">第二列</div>
</el-col>
<el-col :span="8">
<div style="background: blueviolet">第三列</div>
</el-col>
</el-row>
<br>
<el-row :gutter="10">
<el-col :span="4">
<div style="background: green">第一列</div>
</el-col>
<el-col :span="5">
<div style="background: orange">第二列</div>
</el-col>
<el-col :span="8">
<div style="background: blueviolet">第三列</div>
</el-col>
</el-row>
</div>
</template>
<style scoped></style>3.2表单：校验规则
表单包含输入框，单选框，下拉选择，多选框等用户输入的组件。使用表单可以收集，验证和提交数据。
表单项常用组件：
el-input: 输入框
el-select: 下拉框
el-checkbox-group 多选框
el-radio-group：单选框
表单：校验规则
表单组件允许你校验用户的宿儒是否符合规范，来帮助你找到和纠正错误
使用流程
1.定义校验规则
2el-form指定“rules” 属性传入定义的校验规则
3.el-form-item指定“prop”属性与校验规则名称对应
<script setup lang="ts">
import { reactive ,ref} from 'vue';
import { ElForm, FormInstance , FormRules} from 'element-plus';
// 导入 ElForm 组件的实例类型
interface FormModel {
name: string;
age: string;
sex: string;
}
const form = reactive<FormModel>({
name: 'BO',
age: '',
sex: ''
});
const formRules = {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'change' }
]
};
const formRef = ref<FormInstance>()
// 定义表单引用并赋予正确类型
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
console.log(form)
formEl.resetFields()
} else {
console.log('error submit!', fields)
}
})
}
</script>
<template>
<div>
<H3>这是B界面</H3>
<el-form :model="form" :rules = "formRules" ref ="formRef">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
<el-button @click="resetForm(formRef)">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>3.3表格
边框，宽度，固定列
表格属性：
border:是否带有纵向边框
data:表格使用的数据，自动渲染
列属性：
prop: 键名，对应数据中的字段
label:列名
width：列宽度
fixed:列是否固定在左侧或者右侧， true 表示固定在左侧
fixed= "right"卡片
悬浮展示数据，类似于卡片效果。
详情请见卡片
<script setup lang="ts">
import { ref, reactive } from 'vue';
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
<template>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>用户列表</span>
</div>
</template>
<el-button type="primary">新增数据</el-button>
<div style="margin:0 10px">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180" align = 'center' />
<el-table-column prop="name" label="姓名" width="180" align = 'center'/>
<el-table-column prop="address" label="地址" align = 'center'/>
</el-table>
</div>
</el-card>
</div>
</template>弹窗
<script setup lang="ts">
import { computed, ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const GlobalIndex = ref(-1)
const name = ref('')
interface User {
name: string;
city: string;
age: number;
}
const tableData = reactive<Array<User>>([
{
date: '2016-05-03',
name: 'Tom1',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom2',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom3',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom4',
address: 'No. 189, Grove St, Los Angeles',
},
])
const now = reactive(new Date());
let form = reactive({
date: now.toISOString().substring(0, 10),
name: '',
address: '',
})
const handeAdd = () => {
form = reactive({
date: now.toISOString().substring(0, 10),
name: '',
address: '',
})
dialogFormVisible.value = true
}
const save = () => {
if(GlobalIndex.value >=0){
console.log(GlobalIndex.value)
tableData[GlobalIndex.value] = form
GlobalIndex.value = -1
}
else{
tableData.push(form)
}
dialogFormVisible.value = false
}
const handleEdit = (row,index) => {
const newobj = Object.assign({}, row)
form = reactive(newobj)
GlobalIndex.value = index
dialogFormVisible.value = true
}
const handleDelete = (index: number) => {
ElMessageBox.confirm('是否删除该条数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
tableData.splice(index, 1); // 删除指定索引的数据
ElMessage({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
});
});
};
// 搜索关键字状态管理
const searchValue = ref('');
// 定义计算属性，根据搜索关键字过滤表格数据
const filterTableData = computed(() =>
tableData.filter(
(data) =>
!searchValue.value ||
data.name.toLowerCase().includes(searchValue.value.toLowerCase())
)
);
// 监听 searchValue 的变化
watch(searchValue, (newValue, oldValue) => {
if (!newValue) {
filterTableData.value = tableData;
}
});
// 搜索功能的实现
const search = () => {
searchValue.value = name.value;
console.log(searchValue.value); // 更新搜索关键字为输入框的值
};
</script>
<template>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>用户列表</span>
</div>
</template>
<!-- Element UI Input 组件，用于输入搜索名称 -->
<el-input style="width:300px" placeholder="请输入名称" v-model="name" clearable></el-input>
<!-- Element UI 主题样式按钮，点击后执行搜索动作 -->
<el-button type="primary" @click="search" style="margin-left:5px">搜索</el-button>
<el-button type="primary" @click="handeAdd" >新增数据</el-button>
<div style="margin:0 10px">
<el-table :data="filterTableData" style="width: 100%">
<el-table-column prop="date" label="日期" sortable width="180" align = 'center' />
<el-table-column prop="name" label="姓名" width="180" align = 'center'/>
<el-table-column prop="address" label="地址" align = 'center'/>
<el-table-column align = 'right'>
<template #default="scope">
<el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)"
>编辑</el-button>
<el-button link type="danger" size="small" @click.prevent="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog v-model="dialogFormVisible" title="信息" width="50%">
<el-form :model="form" label-width="100px" style="padding-right: 30px;" >
<el-form-item label="日期" >
<el-input v-model="form.date" autocomplete="off" />
</el-form-item>
<el-form-item label="姓名" >
<el-input v-model="form.name" autocomplete="off" />
</el-form-item>
<el-form-item label="地址" >
<el-input v-model="form.address" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="save">
确认
</el-button>
</div>
</template>
</el-dialog>
</el-card>
</div>
</template>3.4轮播图
<script setup lang="ts">
import img1 from '@/assets/lunbo1.png';
import img2 from '@/assets/lunbo2.png';
import img3 from '@/assets/lunbo3.png';
import img4 from '@/assets/lunbo4.png';
const carouselData = [
{ url: img1 },
{ url: img2 },
{ url: img3 },
{ url: img4 },
]
</script>
<template>
<div>
<el-carousel :interval="4000" type="card" height="300px">
<el-carousel-item v-for="item in carouselData" :key="item.url">
<img :src="item.url" alt="轮播图片" style="width: 100%; height: 200px;"/>
<h3>{{ item.url }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>3.5面包屑
详请参考https://juejin.cn/post/7087003440773070856
路由
<template>
<div class="breadcrumb">
<!-- 使用 element-plus 的面包屑组件 -->
<el-breadcrumb separator="/">
<!-- 循环渲染面包屑导航项 -->
<el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
<!-- 使用路由链接包装每个面包屑导航项 -->
<router-link :to="crumb.to">{{ crumb.title }}</router-link>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script setup lang="ts">
// 导入所需的模块
import { computed } from 'vue';
import { useRouter } from 'vue-router';
// 获取当前路由实例
const router = useRouter();
// 使用 computed 函数计算面包屑导航项
const breadcrumbs = computed(() => {
// 从当前路由匹配的规则中筛选出带有 isBreadcrumb 元信息的规则
const matchedRoutes = router.currentRoute.value.matched.filter(route => route.meta && route.meta.isBreadcrumb);
// 根据匹配到的路由规则生成面包屑导航项
return matchedRoutes.map(route => ({
to: route.path, // 面包屑导航项的链接路径
title: route.meta.title, // 面包屑导航项的标题
}));
});
</script>
<style scoped>
.breadcrumb {
display: inline-flex;
align-items: center;
justify-content: flex-start;
text-align: right;
margin: 0 20px;
flex: 1;
}
</style>
