Tips about Element-UI

_Avocado
267 阅读3分钟

一、Table组件

数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）

  1. 行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。

  2. 列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握

    • label：决定当前列显示出的标题
    • prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的属性值。
    • width: 用来设置列的宽度。如果不设置，它会自适应。

  • 在el-table使用data属性

  • 在el-table-item上使用prop属性

  • table组件-自定义列-插槽

我们需要在对应的列中，使用template标签包裹我们自定义渲染的内容，其实用的就是插槽的机制

  • 要自定义的内容:
    • 删除prop属性
    • 用插槽
// 省略其它....
<el-table-column label="操作" width="100">
    <template>
      <el-button size="small" type="danger">删除</el-button>
    </template>
</el-table-column>

  • table组件-自定义列-作用域插槽

  • 场景：直接使用prop只能渲染文本，通过prop不能直接渲染的时，我们需要自定义内容渲染

  • 机制：作用域插槽

    1. slot-scope是固定写法
    2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法
    3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中 image.png

  • 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

  • 如何拿当前行的完整对象数据？ scope.row

二、Form表单组件

  • 表单中的数据项一般会用一个对象包起来
  • 属性名一般和后端接口中保持一致
  • 在元素上采用v-model双向绑定

form表单组件校验

  • 校验内容
    • 内容不能为空（*）
    • 密码长度必须多少位
    • 手机号的格式要合规
    • 邮箱的格式要合规
    • ...
  • 基本步骤

  1. 定义验证规则。data()中按格式定义规则

    在data中,补充定义规则

    格式:

data() {
  return {
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
		}
  }
}

示例:


  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
  1. 在模板上做属性配置来应用规则（三个配置）
    给表单设置 rules 属性传入验证规则
    给表单设置model属性传入表单数据
    给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>
  1. 手动兜底验证
element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
		 // 验证失败
	}
})
  • 说明
    • validate 方法是表单组件自带的，用来对表单内容进行检验。
    • 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证
  • 模板
// 添加ref来引用el-form组件。
<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

submit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })
}

Form表单组件-重置表单清理校验痕迹

  • 恢复表单默认数据
  • 清理校验痕迹
this.$refs.form组件的引用.resetFields()

三、Tree树形组件

  • 配置自定义渲染字段

    • tree组件渲染节点title默认使用的是数据中的label属性，识别子节点默认使用的是children属性，我们尝试把data里的属性名换一下，例如：label换成name，children换成childList，就会发现渲染失败了。如果你非要去自定义这个两个关键字：label和children的话，就需要用到props属性了。
<el-tree :data="data" :props="defaultProps"></el-tree>

defaultProps:{
    label:'name',
    children:'childList'
}

数组转化成树(important)

  • 后端接口返回的数据一般是平铺的数组结构，而不会是树形结构

四、Dialog弹框组件

  • 监听open和close事件

    • 弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件
    • 使用默认插槽来自定义内容
    • 弹框组件一共俩种状态  打开和关闭  :visible.sync="布尔值"

@close  弹框关闭 : dialogVisible从true变成false

@open  弹框打开 : dialogVisible从false变成true

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      @close="dialogClose"
      @open="dialogOpen"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    dialogClose() {
      console.log('弹框要关闭了')
    },
    dialogOpen(){
      console.log('弹框打开咯')
    }
  }
}
</script>

  • 取消两种关闭的方式

<el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
avatar
文章
阅读
粉丝