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>
