element-ui常见问题总结（表单校验、表格checkbox自动取消选中等）

在vue中使用element-ui过程中遇到的问题总结

将element-ui的默认语言设置为英文

1.main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, {
      locale })

2.webpack.dev.conf.js 和 webpack.prod.conf.js 在plugins增加

plugins: [
  new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
]

vue + element-ui实现表单校验时，根据条件不同设置必填校验的方法实现

例如：登录页面密码输错3次以后显示图片验证码，并对图片验证码进行非空校验

<template>
...
    <el-form-item prop="captcha" v-show="isShowCaptcha" 
        :rules="this.isShowCaptcha == true?loginRule.captcha:[{required: false, message: '请输入图片验证码', trigger: 'blur'}]">
    </el-form-item>
...
</template>

<script>
export default {
     
    return {
     
        loginRule: {
     
            captcha: [{
     required: true, message: '请输入图片验证码', trigger: 'blur'}]
        }
    }
}
</script>

element-ui自定义表单规则后，红色必填星号不显示

在自定义的一项那里加上required星号就显示出来了

<el-form-item label="公司名称" prop="name" required>
  <el-input v-model="form.name"></el-input>
</el-form-item>

隐藏表单必填星号

如果想要表单必填项的*号全部不显示的话，只需要给el-form标签添加hide-required-asterisk属性，设置值为true即可。

<el-form :hide-required-asterisk="true">
</el-form>

element-ui表单校验某几项

有时候我们需要只校验表单的某一项，比如获取手机验证码，要校验手机号必填，此时可以用validateField

//phone就是定义的prop字段名称
this.$refs.registerForm.validateField('phone', (errMsg) => {
     
    if (!errMsg) {
     
        console.log('手机号校验通过);
        //调接口
    } else {
     
        console.log('手机号校验不通过);
    };
})

如果校验2项或以上，比如获取手机验证码，要校验手机号和图片验证码，此时prop可以传数组

this.$refs.registerForm.validateField(['phone', 'captcha'], (errMsg) => {
     
    if (!errMsg) {
     
        console.log('手机号、图片验证码校验通过);
        //调接口
    } else {
     
        console.log('手机号、图片验证码校验不通过);
    };
})

这样写之后发现一个问题，第一次点击“获取手机验证码”后正常，手机号和图片验证码出现必填提示

但是手机号填了之后，图片验证码没填的情况下，点击“获取手机验证码”就走到调接口这步了，说明校验通过了

所以，下面这个写法才是最终正确的答案。

if (this.registerForm.phone == '' || this.registerForm.captcha == '') {
     
    this.$refs['registerForm'].validateField('phone');
    this.$refs['registerForm'].validateField('captcha');
} else {
     
    console.log('手机号、图片验证码校验通过);
    //调接口
})

element-ui 遮罩层el-dialog 中间内容被被蒙板遮住

解决：在 el-dialog 标签里添加 :append-to-body=“true”

<el-dialog title="添加用户" :visible.sync="editVisible" width="30%" :append-to-body="true">
...
</el-dialog>

element-ui 表格取消选中clearSelection报错

解决：

this.$nextTick(() => {
     
	this.$refs.multipleTable.clearSelection();
})

解决element-ui table表格 checkbox 会自动取消选中问题

我在项目过程中，遇到打开弹窗，里面的table表格勾选后又自动取消勾选的问题。

解决：

在selection列 设置:reserve-selection=“true”

还要给el-table设置 row-key 属性

<el-table ref="userTable" :data="userList" 
	:row-key="getRowKeys">
	<el-table-column type="selection" :reserve-selection="true"></el-table-column>
	...		
</el-table>

getRowKeys代码如下：

getRowKeys(row) {
     
	return row.id;
}

注：reserve-selection设置为true后，可以实现在数据更新之后保留之前选中的数据，例如第1页选中3项，分页跳到第2页选中2项，再回到第1页的时候3项还是选中状态，最后确定选中的数据是5项。