Element plus CheckboxGroup 计算增加或者减少的值的代码

可以使用以下代码：

<template>
  <div>
    <el-checkbox-group v-model="checkedValues" @change="handleChange">
      <el-checkbox label="选项1"></el-checkbox>
      <el-checkbox label="选项2"></el-checkbox>
      <el-checkbox label="选项3"></el-checkbox>
    </el-checkbox-group>
    <div>总共选择了{{checkedValues.length}}项</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedValues: [],
    };
  },
  methods: {
    handleChange() {
      console.log(this.checkedValues.length);
    },
  },
};
</script>

以上代码使用 Element UI 的 CheckboxGroup 组件实现多选功能，并在组件的 change 事件中计算选中的项数。当用户选中或取消某个选项时，控制台将输出选中的项数。

相关问题

element plus table多选框选中的值 代码实现

可以通过监听多选框的change事件，获取选中的值。具体实现代码如下：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-checkbox-group v-model="checkedList" @change="handleCheck(scope.row)">
        <el-checkbox :label="scope.row.id"></el-checkbox>
      </el-checkbox-group>
    </template>
  </el-table-column>
</el-table>

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 18 },
      { id: 2, name: '李四', age: 20 },
      { id: 3, name: '王五', age: 22 },
    ],
    checkedList: [], // 选中的多选框的值
  }
},
methods: {
  handleCheck(row) {
    console.log('选中的值：', this.checkedList) // 打印选中的值
  },
}

在handleCheck方法中，我们可以通过this.checkedList获取选中的值。如果你想要获取选中的行的完整数据，也可以通过参数row获取。

element plus多选框选中的值

可以通过监听多选框的change事件来获取选中的值，代码如下：

<template>
  <el-checkbox-group v-model="checkboxValues" @change="handleCheckboxChange">
    <el-checkbox label="选项1"></el-checkbox>
    <el-checkbox label="选项2"></el-checkbox>
    <el-checkbox label="选项3"></el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkboxValues: [], // 选中的值
    }
  },
  methods: {
    handleCheckboxChange(val) {
      // val为选中的值
      console.log(val)
    },
  },
}
</script>