当前位置: 首页 > news >正文

vue3 antdv RadioButton默认值选择问题处理

1、先上官方文档:

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

官方代码:

<template><div><div><a-radio-group v-model:value="value1"><a-radio-button value="a">Hangzhou</a-radio-button><a-radio-button value="b">Shanghai</a-radio-button><a-radio-button value="c">Beijing</a-radio-button><a-radio-button value="d">Chengdu</a-radio-button></a-radio-group></div><div :style="{ marginTop: '16px' }"><a-radio-group v-model:value="value2"><a-radio-button value="a">Hangzhou</a-radio-button><a-radio-button value="b" disabled>Shanghai</a-radio-button><a-radio-button value="c">Beijing</a-radio-button><a-radio-button value="d">Chengdu</a-radio-button></a-radio-group></div><div :style="{ marginTop: '16px' }"><a-radio-group v-model:value="value3" disabled><a-radio-button value="a">Hangzhou</a-radio-button><a-radio-button value="b">Shanghai</a-radio-button><a-radio-button value="c">Beijing</a-radio-button><a-radio-button value="d">Chengdu</a-radio-button></a-radio-group></div></div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({setup() {const value1 = ref<string>('a');const value2 = ref<string>('a');const value3 = ref<string>('a');return {value1,value2,value3,};},
});
</script>

上面的代码,我们看出来是个string;

 const value1 = ref<string>('a')

2、处理代码,强转String就可以了

formStateNode.nodetype =node.nodetype == undefined || node.nodetype == null ? '0' : String(node.nodetype);

这样,我们就可以看到,默认是选择的,因为nodetype是个number类型的,如果将nodetype:string;  这样也是不可以,一定要强转一下,因为数据库中返回的是Integer。

http://www.lryc.cn/news/383413.html

相关文章:

  • 最佳实践,一款基于 Flutter 的桌面应用
  • python第一个多进程爬虫
  • 在Ubuntu 18.04上安装和配置Ansible的方法
  • 【详细教程】如何使用YOLOv10进行图片与视频的目标检测
  • LLM大语言模型-AI大模型全面介绍
  • 瑜伽馆管理系统的设计
  • JAVA【案例5-2】模拟默认密码自动生成
  • 小区业主管理系统
  • vncsever ,window 远程ubuntu远程界面安装方式,VNC Viewer安装教程+ linux配置server 操作
  • java spring boot 单/多文件上传/下载
  • C语言的内存函数
  • 【网络通信】计算机网络安全技术总结
  • Redis-实战篇-什么是缓存-添加redis缓存
  • 《妃梦千年》第十一章:再遇故人
  • 反序列化底层学习
  • 项目训练营第五天
  • 数据收集和数据分析
  • Kubernetes(K8s)从入门到精通系列之十九:Operator模式
  • vuex的actions返回结果类型是promise及actions方法互相调用
  • 【干货】Jupyter Lab操作文档
  • iOS分享到微信,配置Universal Links,并从微信打开app,跳转到指定界面
  • 基于SSM构建的校园失眠与压力管理系统的设计与实现【附源码】
  • SAP 初始化库存移动类型561501511区别简介
  • 情感搞笑聊天记录视频:AI自动化生成技术,操作简单,教程+软件
  • RabbitMQ中lazyqueue队列
  • Java三层框架的解析
  • 算法设计与分析 笔记
  • mapreduce的工作原理
  • vue中v-bind和v-model有什么区别
  • 基于SpringBoot和PostGIS的某国基地可视化实战