二七. element-ui常用组件和注意事项

一. 常用组件

1. border边框

给表格等添加边框，一般我们直接添加border属性即可！
举例：

<el-table style="width: 100%" border>
  <el-table-column label="序号"></el-table-column>
  <el-table-column label="品牌名称"></el-table-column>
  <el-table-column label="品牌LOGO"></el-table-column>
  <el-table-column label="操作"></el-table-column>
</el-table>

2. full

这个不是什么属性或方法，而是vscode代码提示。当打出标签代码提示时，有两种选择，第二种后面有个full，意思是所有常用的属性和方法自动被填充，展现出来。

3. 分页器

3.1 分页器的->符号

设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。特殊的布局符号->，->后的元素会靠右显示
举例：

    <el-pagination
        style="margin: 20px 0px;textAlign:center"
        :current-page="1"
        :page-sizes="[3, 5, 10]"
        :page-size="3"
        layout="prev, pager, next, jumper, ->,sizes ,total"
        :total="99">
    </el-pagination>

4. element-ui中的<template slot-scope="scope">

作用域插槽
https://blog.csdn.net/tg928600774/article/details/81945140
这是element-ui封装的结构内容，可以点进去看看源码。

5. 回调参数（默认传参）

什么是回调参数？
字面意思，就是事件回调函数里面的参数（默认传参）。
element-ui文档中事件后面有个回调参数（默认传参）！

6. 表单验证

（1）常用于对话库中内嵌表单，进行表单验证！

（2）表单验证时，trigger:'blur' 和 trigger:'change' 是什么意思？

• el-input输入框的验证，trigger的值选blur，即失去焦点时进行验证。
• 下拉框（el-select）、日期选择器（el-date-picker）、复选框（el-checkbox）、单选框（el-radio）验证时，trigger的值选择change，即当值发生变化时就进行验证。

参考：https://blog.csdn.net/sunhuaqiang1/article/details/115859916

（3）表单验证流程（举例）：

步骤：

• 1.三个属性
• 2.自定义校验规则（可选）
• 3.表单验证规则
• 4.方法methods

<!--
1. 三个属性
	:model
	:rules
	ref
-->
<el-form  :model="tmForm" :rules="rules" ref="ruleForm">
====================================================================================================
data() {
  // 2. 自定义校验规则可选
  var validateTmName = (rule, value, callback) => {
    // 自定义校验规则
    if (value.length < 2 || value.length > 10) {
      callback(new Error("品牌名称2-10位"));
    } else {
      callback();
    }
  };
  return {
 ~,
    tmForm: {
      tmName: "",
      logoUrl: "",
    },
    // 3. 表单验证规则
    rules: {
      //品牌名称的验证规则
      //require:必须要校验字段（前面五角星有关系）  message 提示信息    trigger:用户行为设置（事件的设置:blur、change）
      tmName: [
        { required: true, message: "请输入品牌名称", trigger: "blur" },
        //自定义校验规则
        { validator: validateTmName, trigger: "change" },
      ],
      //品牌的logo验证规则
      logoUrl: [{ required: true, message: "请选择品牌的图片" }],
    },
  };
},
===================================================================================================
methods: {
	//4. 方法
	test() {
	    this.$refs.ruleForm.validate(success) => {
        if (success) {
        }
        else {
          console.log("error submit!!");
          return false;
        }
	}

（4）表单的:model

https://blog.csdn.net/a1059526327/article/details/109630915

7. 气泡确认框

注意事项：

• 按钮标签添加属性slot="reference"
• 确认框中确定和取消按钮的回调函数（事件）：确认（@onConfirm）、取消（@onCencel）

二. 注意事项

1. element-ui很多地方做了封装

这个框架和vue原生框架用法上有很多不一样。为什么？因为element-ui很多地方做了封装。例如表格：

    <el-table prop="prop" style="width: 100%" border :data="list">
      <el-table-column type="index" label="序号" width="80px" align="center" />
      <el-table-column prop="tmName" label="品牌名称" />
    </el-table>

看上面的:data属性，不用this.list，直接写list就行，但是若写this.list也对。还有就是下面的prop属性，竟然不用单向绑定:就可以获取引号中的值（可能是因为设定的值就是字符串。。。确实是这样，有点尬！！！），而且也不用这样写，list[0].tmName。直接写tmName就行！

2. @keyup事件

• @keyup是vue事件语法！

@keyup.enter 回车按键松开
@keyup.left 左键松开
@keyup.right 右键松开
@keyup.up 上键松开
@keyup.down 下键松开
@keyup.delete 删除键松开
链接：https://www.jianshu.com/p/d68cb537724e

• 使用el-input插件后直接使用keyup 是不生效的：需要在@keyup事件后加上native，即@keyup.enter.native=‘(方法)’：