7.常见组件
按钮 Button
<template> <div> <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> </div> </template> <script> export default { } </script> <style> </style>
消息提示 Message
this.$message.success('这是一条成功消息') this.$message.error('这是一条错误消息')
<template> <div> <el-button type="info" @click="open1">消息</el-button> <el-button type="success" @click="open2">成功</el-button> <el-button type="warning" @click="open3">警告</el-button> <el-button type="danger" @click="open4">错误</el-button> </div> </template> <script> export default { methods: { open1() { this.$message.info('这是一条提示信息') }, open2() { this.$message.success('这是一条成功消息') }, open3() { this.$message.warning('这是一条警告消息') }, open4() { this.$message.error('这是一条错误消息') }, }, } </script> <style> </style>
弹出框 MessageBox 确认消息
this.$confirm('这是提示信息','这是标题',{confirmButtonText: '确定按钮',cancelButtonText: '取消按钮',type: 'warning'}) .then(()=>{ // 确定按钮回调 this.$message.success('删除了') // ajax操作 }) .catch(()=>{ // 取消按钮回调 this.$message.error('取消了') })
弹出框
编写弹出层
<template> <div> <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <!-- 弹出层 --> <el-dialog title="这是标题" :visible.sync="dialogVisible" > 我是一段正文信息 <!-- 操作按钮 --> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, //是否显示弹出层 } }, } </script> <style> </style>
抽屉
<template> <div> <el-button type="primary" @click="drawerFormVisible = true">修改学生</el-button> <!-- 抽屉start --> <el-drawer title="我是标题" :visible.sync="drawerFormVisible" direction="rtl" :before-close="handleClose"> <el-form :model="student" label-width="80px"> <el-form-item label="姓名" > <el-input v-model="student.sname" autocomplete="off"></el-input> </el-form-item> <el-form-item label="班级" > <el-select v-model="student.cid" placeholder="请选择班级"> <el-option label="Java12班" value="c001"></el-option> <el-option label="Java34班" value="c002"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="drawerFormVisible=false">确定</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </el-drawer> <!-- 抽屉end --> </div> </template> <script> export default { data() { return { drawerFormVisible: false, student: { } } }, methods: { handleClose(done) { this.$confirm('确认关闭？') .then(_ => { //确定按钮 done(); //结束回调 }) .catch(_ => { //取消 }); } }, } </script> <style> </style>
标签页
<template> <div> <el-tabs v-model="activeName" > <el-tab-pane label="用户管理" name="first"> 用户管理 <el-button type="primary" @click="activeName = 'second'">下一步</el-button> </el-tab-pane> <el-tab-pane label="配置管理" name="second"> 配置管理 <el-button type="primary" @click="activeName = 'third'">下一步</el-button> </el-tab-pane> <el-tab-pane label="角色管理" name="third"> 角色管理 <el-button type="primary" @click="activeName = 'fourth'">下一步</el-button> </el-tab-pane> <el-tab-pane label="定时任务补偿" name="fourth"> 定时任务补偿 <el-button type="primary" @click="$message.success('成功了')">完成</el-button> </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeName: 'first' }; } } </script> <style> </style>
8.Tree组件
表结构
# 分类表 CREATE TABLE t_category( tid VARCHAR(32) PRIMARY KEY COMMENT '分类ID', tname VARCHAR(50) COMMENT '分类名称', `status` INT DEFAULT '1' COMMENT '分类状态：0 禁用、1 启用', parent_id VARCHAR(32) COMMENT '父分类ID', priority INT COMMENT '优先级，越小，同级显示的时候越靠前', depth INT COMMENT '深度，从1递增' ); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1000','男装/运动户外', NULL ,1,1); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2000','手机/数码', NULL ,2,1); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3000','零食/生鲜', NULL ,3,1); #'t1000','男装/运动户外' INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1100','上装', 't1000' ,1,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1200','裤子', 't1000' ,2,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1300','流行趋势', 't1000' ,3,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1110','羽绒服', 't1100' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1120','棉衣', 't1100' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1130','卫衣', 't1100' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1210','休闲长裤', 't1200' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1220','牛仔长裤', 't1200' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1230','卫裤', 't1200' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1310','伞兵裤', 't1300' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1320','夜跑裤', 't1300' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t1330','冰感T恤', 't1300' ,3,3); # 't2000','手机/数码' INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2100','手机', 't2000' ,1,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2200','手机配件', 't2000' ,2,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2300','数码配件', 't2000' ,3,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2110','华为手机', 't2100' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2120','苹果手机', 't2100' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2130','vivo手机', 't2100' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2210','手机壳', 't2200' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2220','手机耳机', 't2200' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2230','手机支架', 't2200' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2310','U盘', 't2300' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2320','硬盘', 't2300' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t2330','电池', 't2300' ,3,3); # t2000','零食/生鲜 INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3100','方便速食', 't3000' ,1,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3200','零食', 't3000' ,2,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3300','名酒', 't3000' ,3,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3400','乳饮冰', 't3000' ,4,2); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3110','方便面', 't3100' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3120','火腿肠', 't3100' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3130','甜品罐头', 't3100' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3140','煎饼冷面', 't3100' ,4,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3210','薯片', 't3200' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3220','饼干', 't3200' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3230','网红IP', 't3200' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3240','海味', 't3200' ,4,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3310','清爽啤酒', 't3300' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3320','微醺红酒', 't3300' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3330','养生黄酒', 't3300' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3340','名优白酒', 't3300' ,4,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3410','酸奶', 't3400' ,1,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3420','纯牛奶', 't3400' ,2,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3430','奶粉', 't3400' ,3,3); INSERT INTO t_category(tid,tname,parent_id,priority,depth) VALUES('t3440','奶酪', 't3400' ,4,3);
后端实现
JavaBean
package com.czxy.entity; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import com.baomidou.mybatisplus.extension.activerecord.Model; import lombok.Data; import java.io.Serializable; import java.util.ArrayList; import java.util.List; @SuppressWarnings("serial") @TableName("t_category") @Data public class TCategory extends Model<TCategory> { //分类ID @TableId private String tid; //分类名称 private String tname; //分类状态：0 禁用、1 启用 private Integer status; //父分类ID private String parentId; //优先级，越小，同级显示的时候越靠前 private Integer priority; //深度，从1递增 private Integer depth; @TableField(exist = false) private List<TCategory> children = new ArrayList<>(); }
Controller
package com.czxy.controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.api.ApiController; import com.baomidou.mybatisplus.extension.api.R; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.czxy.entity.TCategory; import com.czxy.service.TCategoryService; import com.czxy.vo.BaseResult; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; import java.io.Serializable; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @RestController @RequestMapping("tCategory") public class TCategoryController extends ApiController { /** * 服务对象 */ @Resource private TCategoryService tCategoryService; @GetMapping public BaseResult<List<TCategory>> findAll() { // 1 查询所有，并按照parent_id排序 QueryWrapper<TCategory> queryWrapper = new QueryWrapper<>(); queryWrapper.orderByAsc("parent_id"); List<TCategory> list = tCategoryService.list(queryWrapper); // 2 处理数据 父子关系 List<TCategory> resultList = new ArrayList<>(); Map<String,TCategory> cacheMap = new HashMap<>(); list.forEach( tCategory -> { // 3.1 获得父分类 TCategory parentCategory = cacheMap.get(tCategory.getParentId()); // 3.2 如果没有父添加到resultList中，如果有父追加父内部 if(parentCategory == null) { resultList.add(tCategory); } else { parentCategory.getChildren().add(tCategory); } // 3.3 缓存自己 cacheMap.put(tCategory.getTid() , tCategory); }); return BaseResult.ok("查询成功",resultList); } }
前端基本实现
<template> <div> <el-tree :data="categoryList" :props="defaultProps" show-checkbox @check-change="handleCheckChange"> </el-tree> </div> </template> <script> export default { data() { return { categoryList: [], defaultProps: { children: 'children', label: 'tname', disabled: (data,node) => { return data.status == 0 } } } }, methods: { async findAllCategory() { let { data } = await this.$http.get('http://localhost:7777/tCategory') this.categoryList = data.data }, handleCheckChange( data, checked, indeterminate ) { console.log(data, checked, indeterminate); } }, mounted() { this.findAllCategory() }, } </script> <style> </style>
修改状态
后端实现
@PutMapping("/change") public BaseResult changeStatue(@RequestBody TCategory tCategory) { try { //1 查询 TCategory findCategory = tCategoryService.getById(tCategory.getTid()); Integer currentStatus = findCategory.getStatus(); //2 需要修改成的状态 Integer status = currentStatus == 1 ? 0 : 1; //3.1 修改当前 Queue<TCategory> queue = new LinkedList<>(); queue.add(findCategory); //3.2 遍历队列 while(!queue.isEmpty()) { // 1) 获得队首 TCategory currentCategory = queue.poll(); // 2) 修改状态 currentCategory.setStatus(status); tCategoryService.updateById(currentCategory); // 3) 获得所有的子节点 QueryWrapper<TCategory> queryWrapper = new QueryWrapper<>(); queryWrapper.eq("parent_id", currentCategory.getTid()); List<TCategory> list = tCategoryService.list(queryWrapper); queue.addAll(list); } //4 成功 return BaseResult.ok("修改成功"); } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } }
前端实现
<template> <div> <el-tree :data="categoryList" :props="defaultProps" show-checkbox :expand-on-click-node="false" node-key="tid" :default-expanded-keys="expandedArr" @check-change="handleCheckChange"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="info" circle v-if="data.status == 1" size="mini" @click="() => changeCategoryStatus(data)">禁用</el-button> <el-button type="success" circle v-if="data.status == 0" size="mini" @click="() => changeCategoryStatus(data)">启用</el-button> </span> </span> </el-tree> </div> </template> <script> export default { data() { return { categoryList: [], defaultProps: { id: 'tid', children: 'children', label: 'tname', disabled: (data,node) => { return data.status == 0 } }, expandedArr: [] } }, methods: { async findAllCategory() { let { data } = await this.$http.get('http://localhost:7777/tCategory') this.categoryList = data.data }, handleCheckChange( data, checked, indeterminate ) { console.log(data, checked, indeterminate); }, async changeCategoryStatus( nodeData ) { let { data } = await this.$http.put(`http://localhost:7777/tCategory/change`, nodeData) if(data.code == 1){ this.$message.success(data.message) this.findAllCategory() //设置展开内容 this.expandedArr = [] this.expandedArr.push(nodeData.tid) } else { this.$message.error(data.message) } } }, mounted() { this.findAllCategory() }, } </script> <style> .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; } </style>
9.综合案例
弹出层回显学生信息
综合案例：点击学生“修改”按钮，显示弹出层
弹出层中编写表单
编写修改函数
<template> <div> <!-- 列表 --> <el-table :data="studentList" stripe border @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="sid" label="编号" width="150"></el-table-column> <el-table-column prop="sname" label="姓名" width="150"></el-table-column> <el-table-column prop="gender" label="性别" width="150"></el-table-column> <el-table-column prop="age" label="年龄" width="150"></el-table-column> <el-table-column label="爱好" > <template slot-scope="scope"> <el-tag type="warning" v-for="(hobby,index) in scope.row.hobbies" :key="index">{{hobby}}</el-tag> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 弹出层 --> <el-dialog title="修改学生" :visible.sync="dialogFormVisible"> <el-form :model="student"> <el-form-item label="姓名" label-width="80px"> <el-input v-model="student.sname" ></el-input> </el-form-item> <el-form-item label="性别" label-width="80px"> <el-radio-group v-model="student.gender"> <el-radio label="男">男生</el-radio> <el-radio label="女">女生</el-radio> </el-radio-group> </el-form-item> <el-form-item label="年龄" label-width="80px"> <el-input v-model="student.age" ></el-input> </el-form-item> <el-form-item label="爱好" label-width="80px"> <el-checkbox-group v-model="student.hobbies"> <el-checkbox label="抽烟" name="type"></el-checkbox> <el-checkbox label="喝酒" name="type"></el-checkbox> <el-checkbox label="烫头" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> </div> </el-dialog> </div> </template> <script> export default { methods: { handleSelectionChange(val) { this.multipleSelection = val; //保存选中的数据 }, handleEdit(index, row) { // 回显表单 this.student = row // 显示弹出层 this.dialogFormVisible = true }, handleDelete(index, row) { console.log(index, row); } }, data () { return { dialogFormVisible: false, // 表单弹出层是否显示 multipleSelection: [], //多选，选中的数据 studentList: [ { sid: 's001', sname: '张三', gender: '男', age: 18, hobbies: ['抽烟','喝酒','烫头'] }, { sid: 's002', sname: '李思', gender: '女', age: 21, hobbies: ['抽烟','烫头'] } ], student: { } } } } </script> <style> .el-tag + .el-tag { margin-left: 10px; } </style>
10.轮播图
轮播图
<template> <div> <el-carousel :interval="4000" type="card" height="300px"> <el-carousel-item v-for="item in 6" :key="item"> <img src="@/assets/logo.png" alt=""> </el-carousel-item> </el-carousel> </div> </template> <script> export default { } </script> <style> .el-carousel__item img { width: 100%; height: 100%; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>
切换多张图片
<template> <div> <el-carousel :interval="1000" type="card" height="400px"> <el-carousel-item v-for="item in 3" :key="item"> <!-- <img src="@/assets/logo.png" alt="我是提示信息"> --> <!-- <img src="@/assets/img/1.jpg" alt="我是提示信息"> --> <img :src="require(`@/assets/img/${item}.jpg`)" alt="我是提示信息"> </el-carousel-item> </el-carousel> </div> </template> <script> export default { } </script> <style> .el-carousel__item img { width: 100%; height: 100%; } /* 偶数的背景颜色 */ .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } /* 奇数的背景颜色 */ .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>
复杂下拉列表
完整代码
<template> <div> <el-form ref="form" :model="classes" label-width="80px"> <el-form-item label="选择老师"> <el-select v-model="classes.teacherIds" @change="changeTeacher" multiple placeholder="请选择老师"> <el-option v-for="(teacher,index) in teacherList" :key="index" :label="teacher.tname" :value="teacher.id" :disabled="teacher.disabled" > <span style="float: left">{{ teacher.tname }}</span> <span style="float: right;">{{ teacher.typeText }}</span> </el-option> </el-select> </el-form-item> </el-form> {{classes}} </div> </template> <script> export default { data() { return { classes: { teacherIds: [] }, teacherList: [ { id: 't001', tname: '梁桐老师', type: '1', typeText: '授课老师', disabled: false }, { id: 't002', tname: '马坤老师', type: '2', typeText: '助理老师', disabled: false }, { id: 't003', tname: '仲燕老师', type: '3', typeText: '辅导员老师', disabled: false }, { id: 't004', tname: '韩小娇老师', type: '1', typeText: '授课老师', disabled: false }, { id: 't005', tname: '董洪超老师', type: '2', typeText: '助理老师', disabled: false }, { id: 't006', tname: '韩新园老师', type: '3', typeText: '辅导员老师', disabled: false }, ] } }, methods: { changeTeacher(selectIds) { // 选中的老师id // 1 获得选中老师对应的类型 let selectType = this.teacherList.map(teacher => { if(selectIds.includes(teacher.id)) { return teacher.type } }); // 2 处理数据：相同类型，不是选中老师，的其他老师禁用 this.teacherList.forEach(teacher => { if(selectType.includes(teacher.type) && !selectIds.includes(teacher.id)) { // 禁用 teacher.disabled = true } else { // 启用 teacher.disabled = false } }) } }, } </script> <style> </style>
