ElementUI 常用组件使用方法

深碍√TFBOYSˉ_ 2023-10-03 08:41 7阅读 0赞

> **目录**
> 
> 2.table组件-基础使用
> 
> 43 翻页组件 
> 
> 4 Form表单组件-基本使用
> 
> 4.2 重置表单清理校验痕迹
> 
> 5 Tree组件基础使用
> 
> 6Dialog弹框组件
> 
> --------------------
> 
> 1.使用流程

> 1.先下载 npm i element-ui -S 【默认已经创建了脚手架： vue create ‘名字’】
> 
> \-S: 是--save的简写，表示 这个包是**生产依赖**， 表示项目上线也要使用这个包。
> 
> \-S: 是可以省略不写的。
> 
> 如果要安装**开发依赖**，则要加 -D。

### 2.table组件-基础使用 ###

> 2-1 数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）
> 
> 1.  行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。
> 2.  列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握
> 3.  label：决定当前列显示出的标题prop：决定当前列数据的来源。对于表格来说， 它 的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名width: 用来设置列的宽度。如果不设置，它会自适应。
> 
> 4.在el-table使用data属性。在el-table-item上使用prop属性

> 2-2 表格单元格只能渲染文本，如果相渲染图片或者其他，可以自定义：
> 
> 1.  删除`prop`属性
> 2.  用**插槽**
> 3.  通过 `Scoped slot` 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
> 4.  插槽用作用域插槽：作用是自定义内容渲染（prop只能渲染文本）。
> 5.  如何拿当前行的完整对象数据？ scope.row
> 6.  ![202106210048359.png][]

#### 43 翻页组件 ####

基础使用：
    1.layout中的关键字有自己的含义；
    2.total用来设置数据的总条数
    3.事件名不是驼峰命名法，而是采用kebab-case(昵称：烤串命名法)
    4.它会自动接收页码
    <el-pagination 
      layout="prev, pager, next" 
      :total="1000">
    </el-pagination>

### 4 Form表单组件-基本使用 ###

> 1.表单中的数据项一般会用一个对象包起来
> 
> 2.属性名一般和后端接口中保持一致
> 
> 3.在元素上采用v-model双向绑定
> 
> 4.表单内容一定要验证（不能相信用户的任何输入！）
> 
> 5.如果使用是组件库中的表单，最好是采用它们自带的验证方式

**4-1 表单验证 --共三步**

> **1.定义验证规则。data()中按格式定义规则**
> 
>     data() {
>     // 这里写校验函数
>     const validCode = (rule, value, callback) => {
>           // 添加时的校验：code不能重复
>           let existCodeList = this.originList
>           if (this.isEdit) {
>             // 编辑时的校验: code能取自己
>             existCodeList = this.originList.filter(item => item.id !== this.formData.id)
>           }
>           existCodeList.map(it => it.code).includes(value) 
>             ? callback(new Error(value + '已经占用')) 
>             : callback()
>         }
>     
>       return {
>         rules: {
>             // 字段名1：表示要验证的属性
>             // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
>             //     数组中的多条规则会按顺序进行
>             字段名1: [
>               { 验证规则1 ,validator: validName,},
>               { 验证规则2 },
>             ]
>     		}
>       }
>     }
> 
> 2.**在模板上做属性配置来应用规则（三个配置）**
> 
> 注意：rules中的属性名与表单数据项中的属性名必须是一致的。
> 
> 2.1给表单设置 `rules` 属性传入验证规则【在 **el-form** 组件绑定 rules 属性配置验证规**:rules="rules**" 】
> 
> 2.2给表单设置`model`属性传入表单数据【在 **el-form** 组件绑定 model 为表单数据对象 **:model="formData"**】
> 
> 2.3给表单项（Form-Item ）设置 `prop` 属性，其值为设置为需校验的字段名【给需要验证的表单项 **el-form-item** **绑定 prop 属性****prop="name**"，注意：prop 属性需要指定表单对象中的数据名称 】
> 
> **3.手动兜底验证**
> 
>     1.validate方法是表单组件自带的，用来对表单内容进行检验。
>     2.需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证
>     element-ui的表单组件.validate(valid => {
>     	if(valid) {
>     	   // 通过了验证
>     	} else {
>     		 // 验证失败
>     	}
>     })
>     ---------------^-------------------
>     submit () {
>       this.$refs.form.validate(valid => {
>         // valid 就是表单验证的结果，如果是true，表示通过了
>         // console.log(valid)
>         if (valid) {
>           // 通过了验证，你可以做后续动作了
>           this.doLogin()
>         }
>       })
>     }
> 
> 注意：1.自定义规则可以让校验逻辑更加灵活，它的格式是固定的
> 
> 2.callback必须调用

#### 4.2 重置表单清理校验痕迹 ####

> 校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。
> 
> 格式：this.$refs.form组件的引用.resetFields()
> 
> 作用：清理校验痕迹 | 恢复表单默认数据

### 5 Tree组件基础使用 ###

> 有一些业务场景在描述主体关系的时候必须使用树形数据，比如：我们常见的家庭成员关系图，公司里的组织架构等，要描述这样的业务场景，与之对应的，我们就得给出树形结构的数据

data:[
      {
        label:'a',
        id:101,
        children:[
            {},
            {},
            {}
        ]
      }
    ]上面我们就完成了一个基础树形组件的渲染，依赖一个data属性即可，data属性传入的就是树状结构

####  ####

> 数据项中label和children是关键字，不可随意改动。tree组件用它们来显示内容
> 
> tree组件渲染节点title默认使用的是数据中的\`label属性\`，识别子节点默认使用的是\`children\`属性，我们尝试把data里的属性名换一下，例如：label换成name，children换成childList，就会发现渲染失败了。

**5.1获取特定树形节点数据**

> 当我们点击某个树形子节点的时候，如何获取到当前点击这项节点对应的数据？
> 
> 监听时间：@node-click="handleNodeClick"\`

<template>
      <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
    </template>
    
    <script>
      export default {
         methods:{
           // 共三个参数，
           // 依次为：
           //   - 传递给 data 属性的数组中该节点所对应的对象
           //   - 节点对应的 Node
           //   - 节点组件本身
            handleNodeClick(a,b,c){
              console.log(a,b,c)
            }
          }
      }
    </script>

#### 6Dialog弹框组件 ####

> 使用默认插槽来自定义内容

**6.1监听open和close事件**

> 弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件
> 
> @close 弹框关闭 : dialogVisible从true变成false
> 
> @open 弹框打开 : dialogVisible从false变成true

**6.2 取消两种关闭的方式**

>  **:close-on-click-modal="false"  
> :close-on-press-escape="false"**

**6.3小结**

> 1.  弹框组件一共俩种状态 打开和关闭 `:visible.sync="布尔值"`
> 2.  open和close俩个自定义事件要关注
> 3.  取消两种关闭的方式(点击遮罩，esc)

####  ####

[202106210048359.png]: https://img-blog.csdnimg.cn/202106210048359.png