【vue】element UI 的 checkbox 实现互斥

• 实现效果
  

• HTML部分

<div>
   <el-form-item>
      <el-checkbox false-label="0" true-label="1" @change="appraiseChecked('1')" v-model="reportForm.tct_content.satisfaction">满意</el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-checkbox false-label="0" true-label="1" @change="appraiseChecked('1')" v-model="reportForm.tct_content.neckTube">颈管</el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-checkbox false-label="0" true-label="1" @change="appraiseChecked('1')" v-model="reportForm.tct_content.metaplasia">化生</el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-checkbox false-label="0" true-label="1" @change="appraiseChecked('0')" v-model="reportForm.tct_content.displeasure">不满意(细胞量&lt;10%)
      </el-checkbox>
    </el-form-item>
</div>

• js部分

method：{
	appraiseChecked(type){
       if (type === '0') {
            this.reportForm.tct_content.satisfaction = false
            this.reportForm.tct_content.neckTube = false;
            this.reportForm.tct_content.metaplasia = false;
        } else {
            this.reportForm.tct_content.displeasure = false
        }
    },
}