el-checkbox-group选择返回0: 'on'

对于el-checkbox-group组件，返回的值是一个包含中项值的数组。选的项会被表示为字符串数组中的素，而未选中的项不会出现在数组中。如果所有的项都未被选中，则返回一个空。因此，如果你希望获取选项的值，可以通过判断数组的长度来确定有选中项。如果长度为0，则表示没有选中项；数组长度大于0，则表示有选中，并且可以通过访问数组元素获取具体的选中值。

相关问题

el-checkbox-group单选

el-checkbox-group是一个Vue组件，用于呈现一个多选的复选框列表。然而，在开发中，有时需要单选项，就需要将其改为单选。

实现单选很简单，只需将每个选项的v-model绑定到同一个变量即可。例如，假设有三个选项：选项1、选项2和选项3。那么可以创建一个名为selected的data属性，并将每个选项的v-model绑定到它。代码如下：

<el-checkbox-group v-model="selected">
<el-checkbox label="选项1"></el-checkbox>
<el-checkbox label="选项2"></el-checkbox>
<el-checkbox label="选项3"></el-checkbox>
</el-checkbox-group>

<script>
export default {
data() {
return {
selected: ""
};
}
};
</script>

在这个例子中，变量selected的值将是一个字符串，它将是所选选项的标签。如果用户选择了选项1，那么selected的值将变为“选项1”。如果后来又选择了选项2，selected的值将变为“选项2”。但是，如果选项2和选项1不是单选，那么用户将能够同时选择它们。

为了确保只有一个选项被选中，我们需要把每个选项的v-model的值改为相同的值。此外，还需要在el-checkbox上添加一个v-on:change事件监听器，这样当用户选择一个新选项时，就会取消选择先前选中的选项。

<el-checkbox-group v-model="selected">
<el-checkbox label="选项1" v-model="selected" v-on:change="selected='选项1'"></el-checkbox>
<el-checkbox label="选项2" v-model="selected" v-on:change="selected='选项2'"></el-checkbox>
<el-checkbox label="选项3" v-model="selected" v-on:change="selected='选项3'"></el-checkbox>
</el-checkbox-group>

<script>
export default {
data() {
return {
selected: ""
};
}
};
</script>

这些更改将确保只有一个选项是选中的，而其他选项将被取消选中。现在，我们已经把el-checkbox-group转变成了单选。

el-checkbox-group设置三级联动

要实现三级联动的 el-checkbox-group，可以采用以下几个步骤：

1. 定义三个数组分别代表三级数据，例如：

data() {
  return {
    level1: [
      { label: 'A', value: 'a' },
      { label: 'B', value: 'b' },
      { label: 'C', value: 'c' },
    ],
    level2: {
      a: [
        { label: 'A1', value: 'a1' },
        { label: 'A2', value: 'a2' },
      ],
      b: [
        { label: 'B1', value: 'b1' },
        { label: 'B2', value: 'b2' },
      ],
      c: [
        { label: 'C1', value: 'c1' },
        { label: 'C2', value: 'c2' },
      ],
    },
    level3: {
      a1: [
        { label: 'A1-1', value: 'a1-1' },
        { label: 'A1-2', value: 'a1-2' },
      ],
      a2: [
        { label: 'A2-1', value: 'a2-1' },
        { label: 'A2-2', value: 'a2-2' },
      ],
      b1: [
        { label: 'B1-1', value: 'b1-1' },
        { label: 'B1-2', value: 'b1-2' },
      ],
      b2: [
        { label: 'B2-1', value: 'b2-1' },
        { label: 'B2-2', value: 'b2-2' },
      ],
      c1: [
        { label: 'C1-1', value: 'c1-1' },
        { label: 'C1-2', value: 'c1-2' },
      ],
      c2: [
        { label: 'C2-1', value: 'c2-1' },
        { label: 'C2-2', value: 'c2-2' },
      ],
    },
    selected: [],
  };
},

2. 在模板中使用三个 el-checkbox-group 分别渲染三级数据，例如：

<el-checkbox-group v-model="selected">
  <div v-for="item in level1" :key="item.label">
    <label>{{ item.label }}</label>
    <el-checkbox :label="item.value" @change="onLevel1Change(item.value)"></el-checkbox>
  </div>
  <div v-for="item in level2[selected[0]]" :key="item.label">
    <label>{{ item.label }}</label>
    <el-checkbox :label="item.value" @change="onLevel2Change(item.value)"></el-checkbox>
  </div>
  <div v-for="item in level3[selected[1]]" :key="item.label">
    <label>{{ item.label }}</label>
    <el-checkbox :label="item.value"></el-checkbox>
  </div>
</el-checkbox-group>

3. 在组件中定义三个方法，用于处理三级数据的选中状态，例如：

methods: {
  onLevel1Change(value) {
    this.selected.splice(0, 1, value);
    this.selected.splice(1, 1);
  },
  onLevel2Change(value) {
    this.selected.splice(1, 1, value);
  },
},

这样就可以实现三级联动的 el-checkbox-group 了。