Element UI 高频使用组件 vue 2

1. Table表格

1. table 组件基础渲染:

   el-table data: 数组

   el-table-column prop :当前列要求渲染的字段名称

2. 整个表格是列的渲染机制

3. 渲染自定义内容:

   场景: 通过prop不能直接渲染的时候, 自定义内容渲染,

   表格操作栏, 数据转换

   通过作用域插槽: <template #default="scope"> </template>

   scope:{ row } row 代表当前行的所有数据, 以对象形式存在

4. 文本转换: 在差值表达式中调用普通的方法, 传入当前行的数据, 通过switch来改变数据

 

2.分页

1. 翻页结构: 按照传入的顺序依次渲染

2. 分页逻辑: 总页数 = 总条数 / 每页的条数

    

3.Form 表单

1. 表单嵌套结构:

   el-form : model表单数据, rules校验数据, ref实例对象

   el-form-item: prop定义要校验的字段名称

   el-input: 双向绑定的具体的表单数据

2. 双向绑定

   视图 View 数据Model 表单数据依赖于data的响应式属性, 这个属性为表单提供双向绑定支持, 为接口提供数据

3. 表单校验

   1 el-form 身上定义 model和 rules

   2 el-form-item身上定义prop (data, rules 和 model , rules)四个地方数据保持一致

   3 校验逻辑简单, 直接内置校验, 如果比较复杂, 就通过自定义校验函数的形式

   4 整体校验: 用户