+Vue+el-checkbox-group のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+el-checkbox-group へ行く。
- 1 (2022-05-19 (木) 10:09:45)
- 2 (2022-05-19 (木) 12:16:26)

Vue

※前提条件：本文基于 Vue 2.0 创作

注意
示例
- 单选

注意 †[edit]

勾选选中后，返回给 el-checkbox-group 的是对应的“:label”的值，而不是“:value”。必须为字符串String或Number或Boolean类型，不支持Object!官网说明

↑

示例 †[edit]

↑

单选 †[edit]

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

<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/包含”这个函数判断包含不包含，再用三运算符把当前值给进去

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

コメント：