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>
