element UI —— form表单中Radio单选框进行切换 & 表单验证rule动态校验-validator & 保存前进行form表单校验后才能上传-validate
1、效果图
2、代码
结构文章来源：https://www.toymoban.com/news/detail-729272.html
<!-- ruleForm 定义的ref名字 rules-绑定的规则 -->
<el-form :model="form" class="form" ref="ruleForm" :rules="rules" label-width="180px">
<el-form-item label="检查范围" prop="checkRange">
<el-radio-group v-model="form.checkRange" @change="changeCheckRange">
<el-radio :label="'3'">按省份</el-radio>
<el-radio :label="'4'">按城市</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="请选择省份" prop="adminCode" size="small" v-if="labelVal === '3'">
<el-select v-model="form.adminCode" filterable multiple placeholder="请选择省份" @change="changeLevel">
<el-option
v-for="item in byLevelList"
:key="item.adminCode"
:label="item.adminName"
:value="item.adminCode">
</el-option>
</el-select>
<span class="color-red">（省份控件，支持检索，可多选）</span>
</el-form-item>
<el-form-item label="请选择城市" prop="adminCode" size="small" v-if="labelVal === '4'">
<el-select v-model="form.adminCode" filterable multiple placeholder="请选择城市" @change="changeLevel">
<el-option
v-for="item in byLevelList"
:key="item.adminCode"
:label="item.adminName"
:value="item.adminCode">
</el-option>
</el-select>
<span class="color-red">（城市控件，支持检索，可多选）</span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">确定</el-button>
<el-button @click="backToList">取消</el-button>
</el-form-item>
</el-form>
数据文章来源地址https://www.toymoban.com/news/detail-729272.html
<script>
export default {
data () {
const validatePass = (rule, value, callback) => { //自定义规则校验
if (value.length > 0) {
callback()
} else {
if (this.labelVal === '3') {
callback(new Error('请输入省份'))
} if (this.labelVal === '4') {
callback(new Error('请输入城市'))
}
}
}
return{
byLevelList: [],
labelVal: '3',
form:{
adminName: [],
adminCode: [],
},
rules: {
name: [
{ required: true, message: '请选择任务', trigger: 'change' }
],
adminCode: [ // validator 定义名字
{ validator: validatePass, trigger: 'blur' }
],
}
},
methods: {
// 创建检查--提交
onSubmit () {
this.checkFormAdd()
},
// 创建检查--取消
backToList () {
this.$router.back(); //返回上一页
},
/**
* 切换检查范围
* @param {*} val 选中的检查范围
*/
changeCheckRange (val) {
this.labelVal = val
let labelValList = ['3', '4']
if (labelValList.includes(val)) {
this.levelParam = Number(val) === 4 ? 2 : 1
this.form.adminCode = []
this.$nextTick(() => {
this.$refs['ruleForm'].clearValidate();
});
this.getAllListByLevel()
}
},
/**
* 获取省份和城市
* @param {number} level 1-省份 2-城市
* @returns {any}
*/
getAllListByLevel () {
const param = {
level: this.levelParam
}
ajax.NPGet('check_getAllListByLevel', param).then(res => {
this.byLevelList = res
})
},
/**
* 切换省份或城市
* @param {Int} val 选中的省份或城市
*/
changeLevel (val) {
this.form.adminName = []
this.byLevelList.forEach(el => {
val.forEach(item => {
if (item === el.adminCode) {
this.form.adminName.push(el.adminName)
}
})
})
},
/**
* 创建检查
* @param {object} param form表单
* @returns {*}
*/
checkFormAdd () {
// ruleForm-定义的ref valid-必填项没有填，不调接口 输入后，进行保存提交
this.$refs.ruleForm.validate(valid => {
if (!valid) return false;
let param = this.form
checkAdd(param).then((res) => {
this.$message.success('新增成功!');
this.$router.back();
}, err => {
this.$message.error('新增失败!');
});
})
},
}
}
</script>
到了这里，关于element UI —— form表单中Radio单选框进行切换 & 表单验证rule动态校验-validator & 保存前进行form表单校验后才能上传-validate的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
