Element UI入门(四)

Maynor在掘金
134 阅读1分钟

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。

1.1 常见组件

1.1.1 按钮 Button

img

<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>

1.1.2 消息提示 Message

img

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>

1.1.3 弹框 MessageBox：确认消息

img

  this.$confirm('这是提示信息','这是标题',{confirmButtonText: '确定按钮',cancelButtonText: '取消按钮',type: 'warning'})

   .then(()=>{

​    // 确定按钮回调

​    this.$message.success('删除了')

​    // ajax操作

   })

   .catch(()=>{

​    // 取消按钮回调

​    this.$message.error('取消了')

   })

1.1.4 弹出框

l 编写弹出层

img

<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>

1.1.5 抽屉

img

<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>

1.1.6 标签页

img

<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>

1.2 Tree组件

1.2.1 表结构

# 分类表

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);

1.2.2 后端实现

l 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;

/**
 * (TCategory)表实体类
 *
 * @author 桐叔
 */
@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<>();

}

l 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;

/**
 * (TCategory)表控制层
 *
 * @author 桐叔
 */
@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);
    }


}

1.2.3 前端基本实现

img

<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>

1.2.4 修改状态

img

l 后端实现

@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());
    }
}

l 前端实现

<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>
avatar
文章
阅读
粉丝
相关推荐
`ElementUI` 中的奇技淫巧（2023）
36k阅读
 · 
388点赞
Rust UI 框架：Slint UI 简单入门
17k阅读
 · 
159点赞
我是怎么调试 Element UI 源码的
7.0k阅读
 · 
140点赞
vue+element UI upload 上传组件使用经验分享
9.7k阅读
 · 
11点赞
elementUI-cascader-全选功能
4.8k阅读
 · 
26点赞