element-ui如何拿到复选框点击切换的那个值

在Element-UI中，要获取复选框的点击切换的值，可以使用v-model来实现。

首先，在Vue实例中，定义一个data属性来存储复选框的值，例如：

data() {
  return {
    checkboxValue: false
  }
}

然后，在模板中使用el-checkbox组件，并将v-model绑定到checkboxValue，例如：

<el-checkbox v-model="checkboxValue">复选框</el-checkbox>

这样，当用户点击复选框时，checkboxValue的值会随之改变。你可以通过访问checkboxValue值来获取复选框的当前状态。

如果你需要监听复选框状态的改变，可以通过watch选项来实现，例如：

watch: {
  checkboxValue(newValue) {
    console.log("复选框的值改变为：" + newValue);
  }
}

这样，每当复选框的值改变时，就会执行watch中的函数，并通过newValue参数获取到最新的复选框值。

综上所述，你可以通过v-model获取复选框的点击切换的值，并且可以通过watch来监听复选框状态的改变。

相关问题

element-ui 复选框,实现点击表格当前行选中或取消

可以通过监听表格的行点击事件，在事件回调函数中更新当前行的复选框状态来实现。

具体实现步骤如下：

1. 在表格组件上添加 `@row-click` 事件监听器。

<el-table :data="tableData" @row-click="handleRowClick">
  <!-- 表格列定义 -->
</el-table>

2. 在事件回调函数中获取当前行的索引，并更新当前行的复选框状态。

methods: {
  handleRowClick(row) {
    // 获取当前行的索引
    const index = this.tableData.indexOf(row);
    // 更新当前行的复选框状态
    this.$refs.multipleTable.toggleRowSelection(this.tableData[index]);
  }
}

需要注意的是，这里使用了 `$refs` 来获取表格组件的实例，并调用了 `toggleRowSelection` 方法来更新复选框状态。在模板中需要给表格组件添加 `ref` 属性：

<el-table :data="tableData" ref="multipleTable">
  <!-- 表格列定义 -->
</el-table>

完整代码示例：

<template>
  <div>
    <el-table :data="tableData" @row-click="handleRowClick" ref="multipleTable">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      const index = this.tableData.indexOf(row);
      this.$refs.multipleTable.toggleRowSelection(this.tableData[index]);
    }
  }
}
</script>

element-ui 复选框多选 数组绑定值，突然变成布尔值了

可能是因为在绑定值的时候，使用了单个变量而不是数组。如果绑定的是单个变量，那么在选中多个选项时，绑定的值会变成布尔值，表示是否选中了该选项。

可以尝试修改绑定值的方式，使用数组来存储多个选中的值，例如：

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

<script>
export default {
  data() {
    return {
      checkedList: [], // 使用数组存储选中的值
    };
  },
};
</script>

这样就可以正确地绑定多选的值了。