el-checkbox-group の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+el-checkbox-group へ行く。
• +Vue+el-checkbox-group の差分を削除

#author("2022-05-19T11:16:26+08:00","default:Admin","Admin")
#author("2022-06-28T10:58:32+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* 注意 [#ped8e2e2]

勾选选中后，返回给 el-checkbox-group 的是对应的“:label”的值，而不是“:value”。必须为字符串String或Number或Boolean类型，不支持Object![[官网说明:https://element.eleme.cn/#/zh-CN/component/checkbox#checkbox-attributes]]
* 示例 [#f02d6a3b]

** 单选 [#i88bdc88]

下面例子里面使用了 <el-checkbox-button> 标签（最终效果是以按钮的形式呈现）， VUE也提供 <el-checkbox> 可以使用（最终效果是以通常的打勾的形式呈现）

#codeprettify{{
<el-checkbox-group v-model="checked" size="medium">
  <el-checkbox-button v-for="city in cities" :label="city" :key="city" @change="checkbox(city)">\{\{ city \}\}
  </el-checkbox-button>
</el-checkbox-group>

const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  data () {
    return {
      checked: ['上海'],//不能为null，必须要有值
      cities: cityOptions
    };
  }
}
}}

不能直接this.checked=[]或者等于null。因为绑定之后的数组里面有特定参数；
不能直接把this.checked=city 这就需要使用到“includes/包含”这个函数判断包含不包含，再用三运算符把当前值给进去

#codeprettify{{
checkbox(city) {
  this.checked = this.checked.includes(city) ? [city] : [];
},
}}

** 复选 [#ea14d27b]

#codeprettify{{
<el-checkbox-group v-model="selectedBindingStatus" size="medium">
  <el-checkbox-button v-for="item in Status" :label="value" :key="value" >\{\{ item.label \}\}
  </el-checkbox-button>
</el-checkbox-group>

watch:{
  selectedBindingStatus:{
    // 每个属性值发生变化就会调用这个函数
    handler(newVal, oldVal) {
      if (newVal == undefined) {
        this.data.status = '';
      } else if (newVal.length > 0) {
        var temp = '';
        newVal.forEach((element) => {
          temp += element + ',';
        });
        if (temp != '') {
          temp = temp.substring(0, temp.length - 1);
          this.data.status = temp;
        } else {
          this.data.status = '';
        }
        //console.log(this.data.process_list);
      } else {
        this.data.status = '';
      }
    },
    // 立即处理 进入页面就触发
    immediate: true,
    // 深度监听 属性的变化
    deep: true,
  },
},
}}


#hr();
コメント：
#comment_kcaptcha