vue+elementUi项目 点击||触发事件+修改其他标签||style||样式||CSS

业务逻辑：

“是否本人”选项单选按钮（是：置灰其他输入框、否：则不置灰||解除置灰输入框）

HTML:

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="是否本人">
        <el-radio-group v-model="form.whetherSelf" @change="whetherSelfIncident">
            <el-radio v-for="dict in whetherSelfTag" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
        </el-radio-group>
    </el-form-item>
	<el-form-item label="管理员ID" prop="adminId">
		<el-input v-model="form.adminId" id="adminIdCss" v-bind:disabled="data.state" placeholder="请输入管理员ID" ></el-input>
	</el-form-item>
</el-form>
<!-- 其他的都不用我介绍了，主要说一下重点 -->
<!-- @change="whetherSelfIncident" 事件监听，可以传数据到JS -->
<!-- v-bind:disabled="data.state" 置灰（禁止输入） -->

<!-- disabled我见过各种写法：disabled=true || :disabled="true" || disabled || disabled="{{data.state}}" || :disabled="{{data.state}}" -->
<!-- 现在这些都不能通过JS修改或赋值进去，所以这里就不用，不信的可以试一下 document.getElementById("adminIdCss").disabled=true; -->

<!-- 正确写法：v-bind:disabled="data.state" -->

JS:

export default {
  data() {
    return {
      // 用来接收“是否本人”字段字典表的数据 1是 0否
      whetherSelfTag: [],
      // 默认赋值先不置灰输入框
      data:{
        state:false
      }
    };
  },
  created() {
    // 查“是否本人”字典表用的
    this.getDicts("sys_template_type").then(response => {
      this.whetherSelfTag = response.data;
    });
  },
  methods: {
    // 修改是否置灰输入框
    whetherSelfIncident:function(val){
      if (val === "1"){
        this.data.state = true;
      }else {
        this.data.state = false;
      }
    }
  }
};

参上！

看不懂的再问我，懒的再改了就直接把页面代码贴出来了