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 的值。

1. <template>
2.   <el-checkbox
3.     :disabled="readOnly || Object.keys(remindListRule).length !== 0"
4.     size="mini"
5.     v-model="formData.disclaimerSelect"
6.     true-label="1"
7.     false-label="0"
8.     @change="handleCheckBoxChange"
9.   ></el-checkbox>
10. </template>
12. <script>
13. export default {
14.   data() {
15.     return {
16.       readOnly: false,
17.       remindListRule: {},
18.       formData: {
19.         disclaimerSelect: 0  // 初始值为 0
20.       }
21.     };
22.   },
23.   methods: {
24.     handleCheckBoxChange(value) {
25.       console.log('Checkbox changed to:', value);
26.       // 处理 checkbox 改变的逻辑
27.     }
28.   }
29. };
30. </script>
32. <style scoped>
33. /* 你的样式 */
34. </style>

复制代码

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

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

1. <template>
2.   <el-checkbox
3.     :disabled="readOnly || Object.keys(remindListRule).length !== 0"
4.     size="mini"
5.     :value="formData.disclaimerSelect === 1"
6.     @change="handleCheckBoxChange"
7.   ></el-checkbox>
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       readOnly: false,
15.       remindListRule: {},
16.       formData: {
17.         disclaimerSelect: 0  // 初始值为 0
18.       }
19.     };
20.   },
21.   methods: {
22.     handleCheckBoxChange(value) {
23.       this.formData.disclaimerSelect = value ? 1 : 0;
24.       console.log('Checkbox changed to:', this.formData.disclaimerSelect);
25.       // 处理 checkbox 改变的逻辑
26.     }
27.   }
28. };
29. </script>
31. <style scoped>
32. /* 你的样式 */
33. </style>

复制代码

表明

• 方法一：
  
  
  
  • 使用 true-label 和 false-label 属性来指定选中和未选中时的值。
    
  • true-label="1" 表示选中时值为 1。
    
  • false-label="0" 表示未选中时值为 0。
    
  
  
• 方法二：
  
  
  
  • 在 v-model 绑定的变量上手动处理值的变化。
    
  • 使用 :value="formData.disclaimerSelect === 1" 来控制 el-checkbox 的初始状态。
    
  • 在 @change 事件中，根据传入的 value 更新 formData.disclaimerSelect 的值。
    
  
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。