antd vue switch组件怎么把值true、false改为uint32类型的1和0

背景

已知switch组件的checked属性默认是传入true 和 false的,但是有这样的业务情景,既需要使用的是开关,又需要传入的是整数,那么我们应该如何修改呢?
在这里插入图片描述

解决方案

 <a-form-item label="允许失败时保存">
     <a-switch :checked="switchValue === 1" @change="handleSwitchChange"></a-switch>
 </a-form-item>
          
handleSwitchChange(checked) {
  this.switchValue = checked ? 1 : 0;
  this.$set(this.info, 'save_if_fail', this.switchValue);
},
  1. 参数 checked: 这个参数表示开关的状态,true 表示开关被打开,false 表示开关被关闭。

  2. this.switchValue = checked ? 1 : 0;: 这行代码使用三元运算符,根据 checked 的值来设置 this.switchValue。如果 checkedtrue,则 this.switchValue 被设置为 1;如果为 false,则设置为 0

  3. this.$set(this.info, 'save_if_fail', this.switchValue);: 这行代码使用 Vue 的 $set 方法来更新 this.info 对象中的 save_if_fail 属性。这个方法确保 Vue 能够检测到这个属性的变化并触发视图更新。

以上。

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以在表格中显示省市区的名称,而不是它们的 ID 。假设您使用的是 `antd-vue` 中的 `Cascader` 组件,可以按以下方式实现: 1. 在表格创建一个列用于显示市区的名称。 . 在 `Cascader 组件中使用 `show-levels` 属性以显示级别的省市名称。 3. 在 `Cascader` 组件的 `change` 事件中,将所选省市区的名称设置为一个响应式变量。 4. 将响应式变量的渲染到表格中的省市区名称列中。 下面是一个示例代码: ``` <template> <div> <a-table :columns="columns" :data-source="dataSource"></a-table> <a-cascader v-model="selectedOptions" :options="options" :show-all-levels="true" @change="handleChange" /> </div> </template> <script> export default { data() { return { options: [ { value: 'Zhejiang', label: 'Zhejiang', children: [ { value: 'Hangzhou', label: 'Hangzhou', children: [ { value: 'Xihu', label: 'West Lake' } ] } ] } ], selectedOptions: [], dataSource: [ { key: '1', name: 'John', age: 32, address: '' } ] } }, methods: { handleChange(value, selectedOptions) { this.selectedOptions = selectedOptions.map(option => option.label); this.dataSource[0].address = this.selectedOptions.join(', '); } }, computed: { columns() { return [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' } ] } } } </script> ``` 在上述示例中,我们使用了 `a-cascader` 组件来选择省市区,选择后将省市区的名称设置为 `selectedOptions` 变量的,并将其显示在表格中的 `address` 列中。您可以根据您的需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值