ElementPlus使用（五）

Element Plus

官网： element-plus.org/zh-CN/ 安装：npm install element-plus --save

导入组件（main.js）

// 整体导入 EmementPlus 组件库 import ElementPlus from 'element-plus' // 导入 EmementPlus 组件库的所有模块和功能 import 'element-plus/dist/index.css' // 导入 EmementPlus 组件库所需的全局 CSS 样式 按钮 <script setup> </script> <template> <h3>学习element-plus</h3> <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> <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> <style scoped> </style> 图标

图标不展示：没有导入

import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标 import App from './App.vue' const app = createApp(App) //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app ponent(key, component) }

图标的使用：

<script setup> </script> <template> <h3>图标学习</h3> <h3>图标</h3> <!-- Failed to resolve component: Plus --> <!-- 使用之前，应该导入图标并注册到vue中 --> <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> <style scoped> </style> 提示框 <script setup> // ElMessage:消息 // ElMessageBox：消息框 // ElNotification：确认消息 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus' // 消息 const openMsg = () => { ElMessage({ type: 'success', // 属性值：success warning info error message: '这是一条成功的消息', showClose: true // 是否显示关闭按钮 }) } // 确认框 const openConfirm = () => { ElMessageBox.confirm('确认删除？', '标题', { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' }).then(() => { console.log('确认') }).catch(() => { console.log('取消') }) } // 通知 const openNotify = () => { ElNotification({ title: '标题', message: '这是一条通知', duration: 1500 // 展示时间，（单位：毫秒） }) } const openNotify2 = () => { ElNotification({ type: 'success', // 属性值： success warning info error title: '标题', message: '这是一条通知', duration: 1500, position: 'top-left' // 属性值： top-left top-right bottom-right bottom-left }) } </script> <template> <el-button @click="openMsg">消息</el-button> <el-button @click="openConfirm">确认框</el-button> <el-button @click="openNotify">通知</el-button> <el-button @click="openNotify2">通知2</el-button> </template> <style scoped> </style> 导航 <script setup> // 导航 import { reactive, ref } from 'vue' // 默认选中的菜单索引 const selectedIndex = ref("2-2") //默认展开的菜单索引 const defaultOpeneds = ref(["2"]) // 选择菜单触发的回调 const selected = (index, indexPath) => { console.log("index:", index, "indexPath:", indexPath) } // 用户执行的命令: const userCommand = (command) => { // 点击菜单触发的回调 console.log('command:', command) } </script> <template> <h3>水平导航</h3> <!-- mode="horizontal" --> <!-- 要是垂直导航可以不设置 mode --> <!-- default-active：表示默认选中的菜单索引 --> <!-- select： 表示的是选择某个菜单时，调用某个方法--> <!-- 自定义导航样式: background-color 背景颜色 text-color 文字颜色 active-text-color 选中文字后颜色 style="height: 40px;width: 600px;" :高宽 default-openeds: 是否默认展开 --> <!-- 设置垂直导航: 去掉mode; 给导航一个宽度 --> <el-menu :default-active="selectedIndex" @select="selected" background-color="#545c64" :default-openeds="defaultOpeneds" text-color="#fff" active-text-color="#ffd04b" style="width: 200px" > <!-- el-menu-item：对应一级导航 --> <el-menu-item index="1">学习element-plus</el-menu-item> <!-- el-sub-menu：具有二级导航的菜单 --> <el-sub-menu index="2"> <template #title>我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-sub-menu> <el-sub-menu index="3"> <template #title>消息中心</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> <el-menu-item index="3-3">选项3</el-menu-item> </el-sub-menu> <el-menu-item index="4">订单管理</el-menu-item> </el-menu> <h3>面包屑</h3> <!-- separator: 分隔符,根据自己的需求设置 --> <el-breadcrumb separator="/"> <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item> <el-breadcrumb-item>zzzz</el-breadcrumb-item> <el-breadcrumb-item>dddd</el-breadcrumb-item> </el-breadcrumb> <!-- 下拉菜单 --> <!-- @command绑定的事件, 对应的方法:用户执行的命令 --> <el-dropdown @command="userCommand"> <span> 个人中心<el-icon><User /></el-icon> </span> <template #dropdown> <!-- 下拉菜单 --> <el-dropdown-menu> <el-dropdown-item command="order">订单</el-dropdown-item> <el-dropdown-item command="logout">退出</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </template> <style scoped> </style> 标签页 <script setup> import { ref, reactive } from 'vue' // 默认选中的标签名称 const selectedName = ref("2") // 选中标签触发的回调 const tabClick = (tab, event) => { console.log("tab:", tab, "event:", event) } const tab = reactive({ arr: [ { name: '1', title: 'zz', content: '内容1' }, { name: '2', title: 'zzzz', content: '内容2' }, { name: '3', title: 'zzzzzz', 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> <h3>学习标签页</h3> <h3>标签</h3> <!-- v-model 绑定的数据是默认的标签名称 --> <!-- @tab-click: 选中标签触发的回调 --> <!-- type: 修改样式; card:卡片的形式; border-card:内容也具有了边框 --> <el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card"> <!-- el-tab-pane 对应的每个子标签 --> <el-tab-pane label="zz" name="1">内容1</el-tab-pane> <el-tab-pane label="zzzz" name="2">内容2</el-tab-pane> <el-tab-pane label="zzzzzz" name="3">内容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, index) in tab.arr" :key="value.name" :label="value.title" :name="value.name" > {{ value.content }} </el-tab-pane> </el-tabs> </template> <style scoped> </style> 输入框 <script setup> import { ref } from 'vue' const name = ref('') const password = ref('') const content = ref('zzz') const url = ref('zzz ') const url2 = ref('zzz2 ') const email = ref('123@qq ') const selected = ref('2') </script> <template> <!-- 输入框 --> <h3>输入框</h3> <!-- clearable: 可以一键清除 --> <el-input v-model="name" clearable placeholder="请输入用户名" /> <!-- show-password 可切换显示隐藏密码 --> <h3>密码框</h3> <el-input v-model="password" show-password placeholder="请输入密码" /> <h3>文本域</h3> <!-- 行数：rows --> <el-input type="textarea" v-model="content" rows="2" /> <h3>输入内容长度限制 - 输入框</h3> <!-- 限制长度：maxlength --> <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>尺寸：size</h3> 大：<el-input size="large"></el-input> 默认：<el-input></el-input> 小：<el-input size="small"></el-input> <h3>前置</h3> <el-input v-model="url"> <template #prepend> </template> </el-input> <h3>后置</h3> <el-input v-model="url2"> <template #append>qq </template> </el-input> <h3>前置后置</h3> <el-input v-model="url2"> <template #prepend> </template> <template #append>qq </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> <el-option label="后端" value="2"></el-option> <el-option label="服务端" value="3"></el-option> </el-select> </template> <template #append> <el-button> <el-icon><Search /></el-icon> </el-button> </template> </el-input> </template> <style scoped> </style> 单选框、复选框 <script setup> import { ref } from 'vue' // 单选框 const radio = ref('3') const radio2 = ref("b") const radio3 = ref("C") const radioChange = (val) => { console.log("radioChange: ", val) } const radioGroupChange = (val) => { console.log("radioGroupChange:", val) } // 复选框 const checked = ref(["1", "2"]) const checked2 = ref([]) const checkboxGroupChange = (val) => { console.log("checkboxGroupChange:", val) } </script> <template> <h3>单选框、复选框</h3> <h3>单选框</h3> <el-radio v-model="radio" value="1">前端</el-radio> <el-radio v-model="radio" value="2">后端</el-radio> <el-radio v-model="radio" value="3">服务端</el-radio> <h3>单选框 - 事件绑定</h3> <el-radio v-model="radio2" value="a" @change="radioChange">前端</el-radio> <el-radio v-model="radio2" value="b" @change="radioChange">后端</el-radio> <el-radio v-model="radio2" value="c" @change="radioChange">服务端</el-radio> <!-- 单选框组 和 事件绑定 的实现效果是一致的--> <h3>单选框组</h3> <el-radio-group v-model="radio3" @change="radioChange"> <el-radio value="A">前端</el-radio> <el-radio value="B">后端</el-radio> <el-radio value="C">服务端</el-radio> </el-radio-group> <h3>复选框</h3> <!-- checked 默认选择 --> <el-checkbox-group v-model="checked"> <el-checkbox value="1">前端</el-checkbox> <el-checkbox value="2">后端</el-checkbox> <el-checkbox value="3">服务端</el-checkbox> </el-checkbox-group> <h3>事件绑定</h3> <!-- change事件：得到选中的值 --> <el-checkbox-group v-model="checked2" @change="checkboxGroupChange"> <el-checkbox value="1">前端</el-checkbox> <el-checkbox value="2">后端</el-checkbox> <el-checkbox value="3">服务端</el-checkbox> </el-checkbox-group> </template> <style scoped> </style> 下拉框 <script setup> 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: '服务端' } ] }) // 回调:打印选择的value值 const selectChange = (val) => { console.log("selectChange: ", val) } </script> <template> <!-- 下拉框 --> <h3>下拉框</h3> <div style="width: 300px"> <h3>下拉框</h3> <el-select v-model="selected" placeholder="请选择"> <el-option value="1" label="前端"></el-option> <el-option value="2" label="后端"></el-option> <el-option value="3" label="服务端"></el-option> </el-select> <h3>下拉框 - 事件绑定</h3> <el-select v-model="selected2" @change="selectChange" placeholder="请选择"> <el-option value="a" label="前端"></el-option> <el-option value="b" label="后端"></el-option> <el-option value="c" label="服务端"></el-option> </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-option> </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> <style scoped> </style> 日期选择器 <script setup> import { ref } from 'vue' const date = ref('') const dateChange = (val) => { console.log("dateChange:", val) } </script> <template> <h3>日期选择器</h3> <h3>日期</h3> <el-date-picker v-model="date" type="date" placeholder="请选择"></el-date-picker> <h3>日期时间</h3> <el-date-picker v-model="date" type="datetime" placeholder="请选择"></el-date-picker> <h3>事件绑定</h3> <!-- value-format="YYYY-MM-DD HH:mm:ss" 日期格式化 --> <el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" @change="dateChange"></el-date-picker> <!-- 如果想要将日期的语言设置为中文，需要在main.js导入中文的语言包 import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包 然后进行语言设置： app.use(ElementPlus, { locale: zhCn // 设置 Element-plus 组件库的区域语言为中文简体 }) --> </template> <style scoped> </style> 表单

融合之前练习的输入框、文本框、单选框、复选框、下拉框、事件选择器等。

<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: '' } } </script> <template> <h3>表单</h3> <el-form label-width="80" style="width: 400px"> <el-form-item label="文本框"> <el-input v-model="data.name" placeholder="请填写名称"></el-input> </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> </template> <style scoped></style> 对话框 <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 = () => { reset() console.log("关闭") } </script> <template> <!-- 对话框 --> <el-button @click="dialog = true">打开</el-button> <!-- draggable 允许拖拽 当关闭对话框时，会调用dialogClose，并打印关闭 --> <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> <style scoped></style> 分页 <script setup> const currentPage = (val) => { console.log("currentPage:",val) } </script> <template> <h3>page-size:每页显示记录数 total:总记录数</h3> <!-- layout: 布局；prev, pager, next（前一页、当前页、下一页） page-size：每页显示的条数； total:总数量 background：添加背景 jumper, total：跳转、显示总数 --> <el-pagination layout="prev, pager, next" :page-size="10" :total="50" /> <h3>background:显示背景</h3> <el-pagination layout="prev, pager, next" :page-size="5" :total="50" background /> <h3>layout="total" 显示总数</h3> <el-pagination layout="prev, pager, next, total" :page-size="5" :total="50" /> <h3>layout="jumper" 跳转</h3> <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" /> <h3>事件绑定</h3> <el-pagination layout="prev, pager, next" :page-size="5" :total="50" @current-change="currentPage" /> </template> <style scoped> </style> 表格 <script setup> import { ref } from 'vue' const data = ref({ arr: [ { id: '1', name: '张三', web: 'zz ', date: '2024-02-28' }, { id: '2', name: '李四', web: ' .zz ', date: '2024-02-28' }, { id: '3', name: '王五', web: 'zz ', date: '2024-02-28' }, { id: '4', name: '赵六', web: ' .zz ', date: '2024-02-28' }, ] }) // 选中的复选框 let idArr = [] const selected = (data) => { console.log("selected: ", data) idArr = [] // 重置 data.forEach((value) => { idArr.push(value.id) }) console.log("idArr:", idArr) } // 编辑 const edit = (index, row) => { console.log(row) } // 删除 const del = () => { console.log('del:', idArr) } </script> <template> <h3>表格</h3> <el-table :data="data.arr" border height="300" style="width: 800px;"> <el-table-column prop="id" label="编号" width="80"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="web" label="网站" width="300"></el-table-column> <el-table-column prop="date" label="日期"></el-table-column> </el-table> <h3>多选（type="selection"）</h3> <el-table :data="data.arr" border height="300" style="width: 800px;"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="编号" width="80"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="web" label="网站" width="300"></el-table-column> <el-table-column prop="date" label="日期"></el-table-column> </el-table> <h3>表格 + 分页</h3> <el-button type="primary" @click="del">批量删除</el-button> <el-table :data="data.arr" border height="300" style="width: 800px;" @selection-change="selected" > <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="编号" width="80"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="web" label="网站" width="300"></el-table-column> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column label="操作" width="150"> <template #default="scope"> <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)"> 编辑 </el-button> <el-button size="small">删除</el-button> </template> </el-table-column> </el-table> <el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50"></el-pagination> </template> <style scoped> </style>