vue通过后端返回'1'和'0'来对应显示el-checkbox的勾选状态。选中第一个el-checkbox,第二个el-checkbox自动勾选 5C

1、要实现的功能
我要实现的是两个checkbox的状态显示,
两个checkbox的状态根据后台返回的值来定义checkbox状态,
后台返回第一个checkbox的a值是'1'',第二个checkbox的也是b值是'1','1' 表示true ,'0' 表示false。
我要实现的就是当选中第一个checkbox后,第二个会checkbox自动勾选,然后第二个勾选不影响第一个,只有第一个checkbox会影响第二个checkbox。并把值返回给后端
如图所示:

图片说明

2、实现思路:
实现思路是通过computer计算属性里分别写checkbox1和checkbox的属性值,,并且根据'1'还是'0'来 return符合条件的true和false。此时checkbox可以自动勾选。但是勾选checkbox时,提示需要set,于是写来set和get,但是又提示栈溢出。而且通过计算机属性,打印出的v-model绑定checkbox值是undefined。
然后改用data里定义checkbox1和checkbox的v-model值。但是无法初始化或者根据后端返回的值,自动勾选。

3、下面是代码:

<template>
<!-- TCP/IP -->
    <div class="tcpIp">
        <div class="tcpIp-header">
            <svg class="svg-icon" style="width:26px; height:26px; fill:#00A4FF; line-height:60px; margin-top:15px;vertical-align: middle;">
                <use  xlink:href="#TCP-IP-01"></use>
            </svg>
            <h2>TCP/IP</h2>
        </div>
        <div class="tcpIp-content">
            <div class="tcpIp-config text">
                <div class="title">
                    <p class="title-bar"></p>
                    <h3>IP配置.</h3> 
                </div>
                <div class="paramsInfo"> <!-- <input style="" type="checkbox" value/> -->
                    <el-form @submit.native.prevent='onSubmit' :model="networkParams" :rules="rule" ref="form" label-width="1.2rem" id="faceStore-ruleForm" :validate-on-rule-change="false" style="text-align:left">
                        <p style="text-align:right;width:1.02rem">
                                <span >自动获取</span>
                               <el-checkbox name="checked" v-model="checked" style="width:1rem;margin-left:-0.76rem;" @change="checkChange"></el-checkbox>
                        </p>
                        <!-- <el-form-item label="自动获取" prop="name" class="faceStore-form-item" >
                            <el-checkbox name="checked" v-model="checked" style="width:1rem;margin-left:-0.9rem;" @change="checkChange"></el-checkbox>
                        </el-form-item> -->
                        <el-form-item label="设备地址" prop="deviceIp" class="faceStore-form-item">
                            <el-input :disabled="networkParams.autoDNS === '1' || networkParams.dhcp === '1'? true :false" type="text" autocomplete="off" v-model="networkParams.deviceIp" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="IP" prop="netMask" class="faceStore-form-item">
                            <el-input :disabled="networkParams.autoDNS === '1' || networkParams.dhcp === '1'? true :false" type="text" autocomplete="off" v-model="networkParams.netMask" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label=网关" prop="gateWay" class="faceStore-form-item">
                            <el-input :disabled="networkParams.autoDNS === '1' || networkParams.dhcp === '1'? true :false" type="text" autocomplete="off" v-model="networkParams.gateWay" placeholder=""></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="dns-configs text">
                <div class="title">
                    <p class="title-bar"></p>
                    <h3>服务器配置</h3> 
                </div>
                <div class="paramsInfo"> <!-- <input style="" type="checkbox" value/> -->
                    <el-form :model="networkParams" :rules="rule" ref="form" label-width="1.2rem" id="faceStore-ruleForm" :validate-on-rule-change="false">
                        <!-- <el-form-item label="自动获取DNS" prop="name" class="faceStore-form-item"> -->
                            <p style="text-align:right;width:1.02rem">
                                <span >自动获取</span>
                                <el-checkbox :disabled="checked == true ? false :true" v-model="checked1" style="width:1rem;margin-left:-1.05rem" name="checked1"></el-checkbox>
                            </p>
                        <!-- </el-form-item> -->
                        <el-form-item label="首选服务器" prop="primaryDNS" class="faceStore-form-item">
                            <el-input :disabled="networkParams.autoDNS === '1' || networkParams.dhcp === '1'? true :false" type="text" autocomplete="off" v-model="networkParams.primaryDNS" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="备选服务器" prop="alternateDNS" class="faceStore-form-item">
                            <el-input :disabled="networkParams.autoDNS === '1' || networkParams.dhcp === '1'? true :false" type="text" autocomplete="off" v-model="networkParams.alternateDNS" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item class="forms-button">
                            <el-button class="preserve-button" type="primary" @click="preserve">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getNetworkInfo,getNetworkConfig} from '@/request/apiConfig/network-config'
import {validateIP,isValidMask} from '@/components/utils/validate.js';
export default {
    data() {
        return {
            networkParams:{

            },
            networkParams:{
                address:'',
                mask:'',
                gateway:'',
                physicalAddress:'98:df:82:ad:f2:51',
                preferredServer:'',
                alternateServer:'',
            },
            checked:false,
            // checked1:false,
            // disabled:true,
            disableds:false,
            rule:{
                deviceIp:[
                    { required: true, message: '不能为空', trigger: 'blur'},
                    { validator: validateIP, trigger: 'blur' } 
                ],
                netMask:[
                    { required: true, message: '不能为空', trigger: 'blur'},
                    { validator: isValidMask, trigger: 'blur' }
                ],
                gateWay:[
                    // { required: true, message: '名称不能为空', trigger: 'blur'},
                    { min: 0, max: 20, message: '长度2到20位', trigger: 'blur' },
                    { validator: validateIP, trigger: 'blur' } 
                ],   
                primaryDNS:[
                    // { required: true, message: '名称不能为空', trigger: 'blur'},
                    { min: 0, max: 20, message: '长度2到20位', trigger: 'blur' },
                    { validator: validateIP, trigger: 'blur' }
                ],
                alternateDNS:[
                    // { required: true, message: '名称不能为空', trigger: 'blur'},
                    { min: 0, max: 20, message: '长度2到20位', trigger: 'blur' },
                    { validator: validateIP, trigger: 'blur' }
                ],    
            },
        }
    },

    mounted() {
       this.getNetworkInfo()
    },
    watch:{
        'networkParams.dhcp': {
            deep: true,
            handler: function (newVal,oldVal){
                console.log(newval, oldVal,'dhcp, oldVal')
                if(newval!==oldVal){
                    if(newval=='1'){
                        this.checked = true
                    }else{
                         this.checked = false
                    }

                    console.log(this.checked,'watch的this.checked')
                }
            }
        },
        'networkParams.autoDNS': {
            deep: true,
            handler: function (newVal,oldVal){
                console.log(newval, oldVal,'autoDNS的newval, oldVal')
                if(newval!==oldVal){
                    if(newval=='1'){
                        this.checked1= true
                    }else{
                        this.checked1 = false
                    } 
                    console.log(this.checked1,'watch的this.checked1')
                }
            }
        },
        checked: function (newval, oldVal) {
            console.log(newval, oldVal,'newval, oldVal')
            if(newval!==oldVal){
                this.checked1 = newval
                console.log(this.checked1,'this.checked1')
            }

        }
    },
    computed: {
        checked: function() {
            if (this.networkParams.dhcp === '1') {
                return true
            } else if(this.networkParams.dhcp =='0'){
                return false
            }
        },
        checked1: function() {
            if (this.networkParams.autoDNS=== '1') {
                return true
            } else if(this.networkParams.autoDNS =='0'){
                return false
            }
        }
    },
    methods:{
        onSubmit(){return false;},
        getNetworkInfo(){
            let that = this
            this.$nextTick(()=>{
                that.networkParams.dhcp='0'
                that.networkParams.autoDNS='0'
            })
            getNetworkInfo().then((res)=>{
                if(res.data.code == 0){
                    that.networkParams = res.data.data
                    if(res.data.data.dhcp === '1'){
                        that.$set(that.networkParams,'that.checked',true)
                        that.checked == true
                    }else if(res.data.data.dhcp =='0'){
                        that.checked == false
                    }

                    if(res.data.data.autoDNS=='1'){
                        that.checked1 == true
                    }else if(res.data.data.autoDNS=='0'){
                        that.checked1 == false
                    }

                    console.log(this.networkParams,'this.networkParams')
                }else {  
                    this.$message.error(res.data.message)
                }
            }).catch(error=> {

            }); 
        },
        checkChange(val){
            let that = this
            this.checked = val
            window.console.log(this.disabled,'this.disabled')
        },
        preserve(){
             this.$refs.form.validate((valid) => {
                    if (valid) {
                        getNetworkConfig(JSON.stringify(this.networkParams)).then((res)=>{         
                            if(res.data.code==0 || res.code==0 ){
                                this.$message.success('保存成功')                      
                            }else {
                                this.$message.error('保存失败')     
                            }
                        }).catch(error=> {
                               this.$message.error('保存失败')
                        }); 
                    } else {
                      window.console.log('error的');
                      return false;
                    }
                  }) 
        }
    }
}
</script>

3个回答

qq_45627583
qq_45627583 我的跟 这个不同
6 天之前 回复

你computed一个checked,data里也定义一个checked,不会报冲突?

data里面的数据设置为这样

 arr:[
          {checked:false,disableds:false},
          {checked:false,disableds:false},
        ]

然后通过v-for循环给每个多选框设置点击事件

ischecked(index){
        this.arr[index].checked=!this.arr[index].checked
        if(index===0){
          this.arr[1].checked=true;
        }
      },
qq_45627583
qq_45627583 也不是这样的,不过还是感谢,我前天已经解决了,让后端改了值
4 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐