vue中switch开关控制其他组件的禁用状态
在switch组件里,绑定v-on事件,通过change来对isDisabled函数中disabled的值进行取反,另一个组件的disabled属性绑定isdisabled,就可以在switch开关中修改其他组件的disabled属性来
<template>
<div id="app">
<el-form ref="form" :model="form">
<el-form-item label="dhcp">
<el-switch v-model="value" @change="isDisabled" :inactive-text="关闭" :active-text="打开"></el-switch>
<span >打开</span>
</el-form-item>
<el-form-item v-model="form.ip" label="ip" >
<el-input filterable :disabled="isdisabled"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
export default {
name: "app",
data(){
return{
isdisabled:false,
form:{
ip:''
}
}
},
methods:{
isDisabled(){
this.isdisabled = !this.isdisabled;
this.$emit('change',event)
}
}
}
</script>
<style scoped>
</style>