Vue实现ElementUI中列表的选填与必填(根据一个下拉框选项内容决定另一个下拉框是否为必填项)

需求:

	根据一个下拉框选项内容决定另一个下拉框是否为必填项
1)根据厂商决定设备名称是否选填或必填。
(2)如果厂商为华为,设备名称为必填**并自定义提示信息**;
(3)如果厂商为其他,设备名称为非必填
 建议使用法二

在这里插入图片描述
在这里插入图片描述

1、data里:

data(){
	return{
		isShow:false,//判断是否为必填
		//这里是法一(不推荐使用)
		/*
		rules: {
			//company: [{ required: isShow, message: '请选单位', trigger: 'blur' },//这里会报错,required无法动态绑定,也无法更改message提示信息(依旧为英文默认提示)
			company: [{ trigger: 'blur' },//法一这个不能少
		}
		*/
	}
}

2、template:

<el-form-item label="厂商:" prop="role">
    <el-select clearable v-model="ruleForm.role" placeholder="请选择" @change="roleChange">
      						//由@change判断select是否更改(是select的属性,不知道的看官网)
        <el-option
             v-for="item in list"
             :key="item.id"
             :label="item.name"
             :value="item.id">
         </el-option>
     </el-select>
</el-form-item>

选填与必填的内容:
法一:(不推荐使用)

<el-form-item label="设备名称"  prop="company" :required:"isShow">

法二:

<el-form-item label="设备名称" prop="company" :rules="[{required:isShow,message:'请选择设备名称',trigger:'blur'}]"> //这个是选填与必填的内容,message根据需求更改

3、method方法:

 methods: {
    roleChange(role){
    	// 使用$nextTick去更新dom
        this.$nextTick(()=>{
        	//此处判断 是你想要的值 就让它为必填,不是就让走else 逻辑
            if(role== '华为'){
                this.isShow = true;
            }else {
                this.isShow = false;
                //表单的 ref全部清空验证
                this.$refs['ruleForm'].clearValidate();
                //清除表单单个验证信息(ruleForm: 为表单Table的ref(获取DOM元素),company:为清除单个项的prop)
                //this.$refs['ruleForm'].clearValidate(['company']);
            }
        });
    },
 }

做到这里就成功了一大半,但是会发现(还有坑):

      在详情(查看)和编辑页面,即使厂商为华为,但设备名称**依旧为非必填**
 if (flag == "edit" && data) {
        this.rightTitle = "编辑设备";
        this.ruleForm = data;
        console.log(data);
        // if (data.role=='华为') {
        //   this.isShow=true
        // }
        data.role=='华为'?this.isShow=true:'', //在当页面为编辑(或详情)时,判断一下选中的是否为华为
        this.flag = "edit";
  }
4.新增法三(最简单):
<el-form-item label="设备名称" prop="company" :rules="[{required:ruleForm.role=='华为'?true:false;message:'请选择设备名称',trigger:'blur'}]">
	....
</el-form-item>
  • 8
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值