Element UI 整合 vue 的那些细节【学生管理/用户管理】

怼烎@ 2023-09-30 10:43 6阅读 0赞

#### 1. Element UI 引入 ####

*  注意：在main.js中导入的element的css样式，一定要**放在App.vue 之前**。
 *  原因：自定义的css将会覆盖element的样式。存在一个**级别关系**，越往下将优先展示。
    
    ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16][]

#### 2. 布局容器 ####

*  布局页面完成后, 整个body会存在**一圈空白**, 开发中一般选择重新设置页面样式。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

处理步骤：

*  步骤一: 百度搜索”reset.css” , 并创建 assets/reset.css ,拷贝样式 (复制下面样式即可)
 *  位置：src/assets/reset.css

![92cc65e06aaf4538b5c61bc69eb116ea.png][]

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {
        margin: 0;
        padding: 0;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    fieldset,img {
        border: 0;
    }
    
    address,caption,cite,code,dfn,em,strong,th,var {
        font-style: normal;
        font-weight: normal;
    }
    ol,ul {
        list-style: none;
    }
    
    caption,th {
        text-align: left;
    }
    
    h1,h2,h3,h4,h5,h6 {
        font-size: 100%;
        font-weight: normal;
    
    }

*  导入**rese.css**,样式重置

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

*  导入样式后效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

#### 3. 卡片显示外围框：上下左右居中 ####

*  **上下左右居中样式：**

.login {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }

#### 4. 登录表单 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

>  *  解析：
>     
>      *  ref ：为组件ref进行**命名**，通过该名称来获得指定组件
>      *  :model ：绑定表单数据对象
>      *  :rules ：设置校验的**规则**
>      *  label ：标签**文本**的内容
>      *  prop ：设置需要**校验**的属性
>      *  prefix-icon ：在 input 组件**首部**增加显示图标
>      *  suffix-icon：在 input 组件**尾部**增加显示图标
>      *  placeholder：提供可描述输入字段预期值的**提示信息**，在输入字段为空时显示,并会在字段获得焦点时消失。

——普通字段校验

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

—— 程序校验

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

#### 5 ajax提交 ####

注： async 所写的位置位于，距离await**最近的一个函数**的前面

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

#### 6. 自定义校验 ####

注：注意各个组件的作用与用法

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

——注意：自定义校验要写在**data()和return 之间**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

#### 7. 控制对话框，抽屉的收起 ####

—— 效果图

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

—— 注意细节：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

—— 升级,使用函数：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

#### 8. 批量删除 ####

——效果图

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_4_color_FFFFFF_t_70_g_se_x_16][]

—— 细节1：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

—— 单个删除和多个删除合体

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

#### 9. 查询所有【分页查询，条件查询】 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

#### **——分页查询** ####

<template>
    
        <el-pagination
           background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[1,3,5,7,9,10]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
    
    </template>
    
    <script>
    import axios from 'axios';
    export default {
    data() {
          return {
            pageInfo: {
    
                pageNum : 1 ,
    
                pageSize: 3,
    
            },   //学生列表
    
            studentVo : {}, //条件查询
    
          }
        },
    
    methods:{
        //监听条数的变化
        handleSizeChange(val) {
         console.log(`每页 ${val} 条`);
         this.pageInfo.pageSize = val ;
         this.pageInfo.pageNum = 1 ;
         //重新开始遍历
         this.condition();
          },
      //监听页数数的变化
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.pageInfo.pageNum =  val ;
          //重新开始遍历
          this.condition();
         }
        },
      }
    }
    </script>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6f9de00564b54b6ea9a73d2ef30a8fba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/793d63ce075643c8817f4677cf572777.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[92cc65e06aaf4538b5c61bc69eb116ea.png]: https://img-blog.csdnimg.cn/92cc65e06aaf4538b5c61bc69eb116ea.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/3252950a6b214a9aac21919ea085b22e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/b0614a5f7ad049b6b5c052881109a1cb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/4521a24bed2d4594838cbcf9e768ab80.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/0602bbc9beb34bf6a67cb950fe39aafa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/a1c1e087e5ee4b8ea08fa831b33716ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/43711e17e1c74926a22693ae2af46ab4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/b9f8a8467af94e16b59b4ef20fdceb60.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/b5c1ad728dcc481ca4a392ddd0e5cb3e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/6f7911ec762948f39fc0885cddfa9ad5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/d9b6ad48f1154cd5b1c2672f8bf1eb12.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/ca23ad687f9b42f3a3c10854f3bef375.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_4_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/81a639a52ab5403eb8a907a1d3118b76.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_4,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/650be5bbd280464c83436b05818bd388.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/2ab0ad4774b2437f896cfa701d6c6db6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/946e3836d11c4447b1ab984ea5d3d2fc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Lev6YGl5Y-25a2Q_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/f3e8455dfcc442f6b7172f95f298face.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Lev6YGl5Y-25a2Q,size_20,color_FFFFFF,t_70,g_se,x_16