1. Element UI 引入

• 注意：在main.js中导入的element的css样式，一定要放在App.vue 之前。

• 原因：自定义的css将会覆盖element的样式。存在一个级别关系，越往下将优先展示。

  

2. 布局容器

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

处理步骤：

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

• 位置：src/assets/reset.css

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,样式重置

• 导入样式后效果

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

• 上下左右居中样式：

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

4. 登录表单

• 解析：

  • ref ：为组件ref进行命名，通过该名称来获得指定组件

  • :model ：绑定表单数据对象

  • :rules ：设置校验的规则

  • label ：标签文本的内容

  • prop ：设置需要校验的属性

  • prefix-icon ：在 input 组件首部增加显示图标

  • suffix-icon：在 input 组件尾部增加显示图标

  • placeholder：提供可描述输入字段预期值的提示信息，在输入字段为空时显示,并会在字段获得焦点时消失。

——普通字段校验

—— 程序校验

5 ajax提交

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

6. 自定义校验

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

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

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

—— 效果图

—— 注意细节：

—— 升级,使用函数：

8. 批量删除

——效果图

—— 细节1：

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

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

——分页查询

<template>
<!-- 分页条start -->
    <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>
<!-- 分页条end -->
</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>