el-checkbox 组件如果值为0和1要如何转化

在代码中，el-checkbox 组件的 v-model 绑定的是 formData.disclaimerSelect，并且 disclaimerSelect 的值是 0 和 1。然而，el-checkbox 默认情况下期望布尔值（true 或 false），而不是数字值。为了使 el-checkbox 能够正确处理 0 和 1 的值，需要进行一些调整。

方法一：使用 true-label 和 false-label

el-checkbox 组件提供了 true-label 和 false-label 属性，可以用来指定选中和未选中时的值。你可以利用这两个属性来处理 0 和 1 的值。

<template>
  <el-checkbox
    :disabled="readOnly || Object.keys(remindListRule).length !== 0"
    size="mini"
    v-model="formData.disclaimerSelect"
    true-label="1"
    false-label="0"
    @change="handleCheckBoxChange"
  ></el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      readOnly: false,
      remindListRule: {},
      formData: {
        disclaimerSelect: 0  // 初始值为 0
      }
    };
  },
  methods: {
    handleCheckBoxChange(value) {
      console.log('Checkbox changed to:', value);
      // 处理 checkbox 改变的逻辑
    }
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>

方法二：手动处理 v-model 的值

如果你不想使用 true-label 和 false-label，也可以在 v-model 绑定的变量上手动处理值的变化。

<template>
  <el-checkbox
    :disabled="readOnly || Object.keys(remindListRule).length !== 0"
    size="mini"
    :value="formData.disclaimerSelect === 1"
    @change="handleCheckBoxChange"
  ></el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      readOnly: false,
      remindListRule: {},
      formData: {
        disclaimerSelect: 0  // 初始值为 0
      }
    };
  },
  methods: {
    handleCheckBoxChange(value) {
      this.formData.disclaimerSelect = value ? 1 : 0;
      console.log('Checkbox changed to:', this.formData.disclaimerSelect);
      // 处理 checkbox 改变的逻辑
    }
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>

解释

1. 方法一：

   • 使用 true-label 和 false-label 属性来指定选中和未选中时的值。
   • true-label="1" 表示选中时值为 1。
   • false-label="0" 表示未选中时值为 0。

2. 方法二：

   • 在 v-model 绑定的变量上手动处理值的变化。
   • 使用 :value="formData.disclaimerSelect === 1" 来控制 el-checkbox 的初始状态。
   • 在 @change 事件中，根据传入的 value 更新 formData.disclaimerSelect 的值。

这两种方法都可以确保 el-checkbox 正确处理 0 和 1 的值。