element:常见用法总结（前后台常见问题与自定义表单验证）

最新推荐文章于 2024-05-22 18:10:32 发布

tomorrownan

最新推荐文章于 2024-05-22 18:10:32 发布

阅读量1.6k

点赞数 1

分类专栏： Vue 文章标签： elementui

本文链接：https://blog.csdn.net/w1418899532/article/details/100730752

版权

这篇博客总结了工作中遇到的Element UI的常见问题及其解决办法，包括将后台返回的数字转换为文字显示，自定义修改Element UI样式，动态增加表单，实现模糊搜索，输入框后添加单位，处理Tab组件返回的字符串类型，自定义表单验证以及多个表单同时验证的实现。通过示例代码详细展示了每个问题的解决过程。

摘要由CSDN通过智能技术生成

持续记录工作中遇到的element-ui常见的问题及常见用法。。。。。

后台返回数字前端显示文字的方法
修改elementui默认样式
实现动态增加表单
实现模糊搜索
实现input框中后面加单位
开关switch组件开关切换返回的是字符串！！
表单验证(含正则)
多个表单同时验证

1.后台返回数字前端显示文字的方法

后台给的状态是使用12345状态码表示的，前端要把它转成对应的状态文字。

这里使用element-ui的table为例，代码如下：

<el-table-column propery="authStatus" label="审核结果" align="center">
	 <template slot-scope="scope">
	   <span v-if="scope.row.authStatus === 0">已审核</span>
	   <span v-if="scope.row.authStatus === 1">待审核</span>
	   <span v-if="scope.row.authStatus === 2">审核中</span>
	   <span v-if="scope.row.authStatus === 3">通过</span>
	   <span v-if="scope.row.authStatus === 4">已过期</span>
	   <span v-if="scope.row.authStatus === 5">不通过</span>
	<!--          <span>{
   {
    scope.row.authStatus }}</span>-->
	 </template>
</el-table-column>

在这里插入图片描述

实现效果：

在这里插入图片描述

2. 修改elementui默认样式

使用chrome开发工具找到要修改的样式，直接重写样式即可。

注意，一定不能使用scope作用域，亲测<style lang="scss" scoped>时重写不起作用。

如下重写对话框头部样式，添加背景色，代码如下：

<style>
  .dialog .el-dialog__header {
   
    background: #27aafa;
  }
</style>

效果如下：

在这里插入图片描述

3.动态增加表单

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则。

实现效果如下：

动态效果

HTML代码如下：

<!-- 动态添加表单 -->
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic" style="width: 400px;">
	<el-form-item
	  prop="email"
	  label="邮箱"
	  :rules="[
	    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
	    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
	  ]"
	>
	<el-input v-model="dynamicValidateForm.email"></el-input>
	</el-form-item>
	<el-form-item
	v-for="(domain, index) in dynamicValidateForm.domains"
	:label="'域名' + (index + 1)"
	:key="domain.key"
	:prop="'domains.' + index + '.value'"
	:rules="{
	  required: true, message: '域名不能为空', trigger: 'blur'
	}"
	>
	<div class="flex">
	<el-input class="inputform" v-model="domain.value"></el-input>
	<img class="deleteicon" @click.prevent="removeDomain(domain)" src="../assets/delete.png">
	</div>
	</el-form-item>
	<el-form-item>
	<el-button type