实现点击一个选框 使得一个组件的可选性修改

实现效果

在这里插入图片描述
在这里插入图片描述

代码

html

<div class="divrow">
  <el-checkbox-group v-model="isSendTag" :max="1">
    <el-checkbox v-for="(item, index) in isSendTagOptions" :key="index" :label="item.value">{{
      item.label }}</el-checkbox>
  </el-checkbox-group>
  <span style="font-size:medium;margin-left: 1vw;">使用标签发送:</span>
  <el-checkbox-group v-model="tagId">
    <el-checkbox v-for="(item, index) in tagidOptions" :key="index" :label="item.value" :disabled="isTagDisabled">{{
      item.label }}</el-checkbox>
  </el-checkbox-group>
</div>

js

//发送是否使用标签选择
var isSendTagOptions = [{
  "label": "",
  "value": 2
}]

var tagidOptions = [{
  "label": "全部用户",
  "value": 1
}, {
  "label": "管理员",
  "value": 2
}, {
  "label": "普通用户",
  "value": 3
}]
const isTagDisabled = computed(() => !isSendTag.value.includes(2));

你可能感兴趣的:(java,前端)