①. 页面布局el-container

1>. 页面布局el-container

• ①. 效果图如下:
  一般包含四个部分(
  头:用来放置查询条件(表单)
  主题部分：表格的显示(表格)
  尾部(分页)
  弹出层
  )

②. 常用几种布局

布局

(1). 头、主体、尾部、弹出层

(2). 头、主体、尾部、弹出层、侧边栏

②. 表单

2>. 表单(form)

①. 表单基础说明

①. 数据的双向绑定：通过：model 和 v-model

②. 表单中输入框离开焦点时,通过：rules 来完成校验

③. 全局校验：this.r e f s [ r e f ] . v a l i d a t e ( ( v a l i d ) = > ) [ 如 果 v a l i d = = t r u e 表 示 校 验 成 功 ] ( t h i s . refs[ref].validate((valid)=>{ }) [如果valid==true表示校验成功] ( this.refs[ref].validate((valid)=>)[如果valid==true表示校验成功](this.refs.loginFromRef.validate(async valid => {)

表单数据 formData: { },//表单数据

注意：这里的rules是在data{ } 大括号当中的

②. 转成行内元素(:inline=“true”)

• 如果想要呈现每一个el-form-item 成行内元素,我们将设置:inline=“true”
  (eleme后台的el-form表单分为左右两边放数据 :inline=“true”)