elementPlus学习（持续更新）

原创已于 2023-06-30 11:00:52 修改 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习

于 2023-06-29 15:35:27 首次发布

web技术同时被 2 个专栏收录

28 篇文章

订阅专栏

前端vue

17 篇文章

订阅专栏

本文介绍了ElementPlus框架中表单验证的关键属性如prop,rules,show-message等，以及Message、MessageBox和Notification的使用方法。文章强调了校验规则的设置，如trigger和message，并提到了不同屏幕尺寸下的布局策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

谁能想到element还要学啊，昨天写表单，发现自己完全不太懂表单的校验，有没有人和我一样在大学做项目表单从来不校验的，毕竟只有自己用，能展示就行。所以决定今天仔细看一下elementui的一些不熟悉的内容。

form表单

校验（以下内容不写函数字样的都是属性）

prop

相当于给每个formitem一个name固定（不能重名），这样方便使用相应的rule，以及进行validate、resetFields等操作；

rules

给定校验规则；
rules的格式如下：

const rules = ref({
  text: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  number:[
    。。。
  ]
});

总体来说就是rules 是个对象；
对象的每个key是prop，value是一个约束条件数组
每个数组元素都是一个对象，
其中前面的都是约束条件，message是下方的提示字段，trigger是触发报错的event（change，blur等）

show-message

提示校验错误信息；

inline-message

是否在行内显示校验信息（官方api是这么写的，还没试出来具体是干什么的，如果哪次用到了就补上）

status-icon

右侧✔或×表示校验成功与否

require-asterisk-position

设置必填符号 * 的位置

scroll-to-error

滚动到错误表单位置（与页面底部对齐）

validate-status

这个属性官网没怎么讲是怎么用的我去百度看应该是跨域手动设置校验结果的意思，这个属性的参数是结果的状态，分别为’error’ | ‘validating’ | ‘success’

template中在formitem里设置 :validate-status='vState' @blur="validateXXX"
用validateXXX这个函数修改vState的值

validate-on-rule-change

当rule改变时进行验证（validate）（暂时还没想到使用情况）

validateField（函数）

只验证某个字段（所以有参数prop）

clearValidate（函数）

清除某一项的内容（一般用于验证码这种不要重填的）
这个不仅可以放在el-form里也可以放在el-form-item里，放在item里没有参数，放在el-form里面要参数（prop）

scrollToField（函数）

滚动到指定字段，所以也有参数（prop）

Tips：
1.只有有prop才可用rules包括required
2.el-form只能使用 :model 而不是v-model，不要想当然（看了半天我才反应过来我这边写错了）

基本的格式如下：

<template>
  <el-container>
    <el-form ref="formRef" :model="form" :rules="rules" status-icon >
      <el-form-item label="text" prop="text">
        <el-input v-model="form.text"></el-input>
      </el-form-item>
      <el-form-item label="number" prop="number">
        <el-input v-model="form.number"></el-input>
      </el-form-item>
      <el-form-item label="date" prop="date">
        <el-input v-model="form.date"></el-input>
      </el-form-item>
      <el-form-item label="cusText" prop="cusText">
        <el-input v-model="form.cusText"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit"> Create </el-button>
        <el-button @click="reset">Reset</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
const rules = {
  text: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ]
};
const form = reactive({
  text: "",
  number: "",
  date: "",
  cusText: "",
});
const formRef = ref();
function submit() {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
    }
  });
}
function reset() {
  formRef.value.resetFields();
}
</script>

提示框

提示框有很多种，可以弹出框可以点击确认的提示，也可以只是一个小的消息框。

Message

提示消息

ElMessage({
	message:h('标签名',属性,’内容‘),		// 提示内容（这里用h，h从vue中import）
	type:'success',			// 提示类型
	grouping: true,			// 多条相同message是否可以合并（在右上角显示条数）
	// dangerouslyUseHTMLString: true, // 如果使用这个就直接在message里面写html，不用h）
	offset: 12, 				// 与顶部的距离
	appendTo: xxx,		// 以什么为根，默认document.body，可以用dom操作获取
	duration:1000			// 持续时间
})

MessageBox

确认框

ElMessageBox.xxx
这里的xxx就有alert，prompt，comfirm等，需要用直接看官方文档

链接: MessageBox官方文档

Notification

右侧提示框

ElNotification({
	title:'',
	type:'',
	message:'',
	duration:0		//不自动关闭
	position;'top-left'
})

table

table很常用，就不过多看了，但是我看见plus文档中有Virtualized Table这个东西，还从来没用过

Virtualized Table

感觉是动态加载内容的table，如果有很大量的数据并且不要分页就使用这个

row,col

写代码的时候完全忘了还有一个gutter的属性，还搁那调margin呢

<el-row :gutter="20">

通过gutter设置col之间的间距，也可以采用offset来间隔，毕竟这个是自适应的不用去自己写margin调，
当col的span没满24的时候可以用justify属性进行调整，其实就是flex里的justify-content

xs、sm、md、lg 和 xl
在这里插入图片描述

这五个是页面视口的大小，可以设置在这五个情况的span大小

<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
      ><div class="grid-content ep-bg-purple"
    /></el-col>

根据视口大小隐藏
hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐藏