一、概述
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.isCollapseif(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 | errormessage: '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 | errortitle: '标题',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.lengthindex++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) returnformEl.resetFields()
}
const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait 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] = formGlobalIndex.value = -1}else{tableData.push(form)}dialogFormVisible.value = false
}const handleEdit = (row,index) => {const newobj = Object.assign({}, row)form = reactive(newobj)GlobalIndex.value = indexdialogFormVisible.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>
![[MAUI]集成高德地图组件至.NET MAUI Blazor项目](https://img-blog.csdnimg.cn/direct/7057550c4f7049ee8cdc1a2f78ed55c2.gif)
