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.mfbz.cn/a/729951.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网络编程5----初识http

1.1 请求和响应的格式 http协议和前边学过的传输层、网络层协议不同&#xff0c;它是“一问一答”形式的&#xff0c;所以要分为请求和响应两部分看待&#xff0c;同时&#xff0c;请求和响应的格式是不同的&#xff0c;我们来具体介绍一下。 1.1.1 请求 在介绍请求之前&…

助力数据跨境,最新政策解读与应用实践分享

6月13日&#xff0c;VERYCLOUD睿鸿股份联合深数所企业数据合规服务南山工作站、亚马逊云科技&#xff0c;在深圳南山区共同主办了一场关于《数据出境合规之路——法规解析与实践探索》研讨会。 VERYCLOUD睿鸿股份是南山大数据产业协会的副会长单位。南山大数据产业协会作为深圳…

C++代码编写风格:Header-Only与声明实现分离的选择

C代码编写风格&#xff1a;Header-Only与声明实现分离的选择 最近看到一些小伙伴问到了几个比较有趣的问题&#xff0c;这里总结一下&#xff0c;这些都是实际面试中出现过的问题&#xff0c;看看你知道多少&#xff0c;考察一下底子。 面试问题1&#xff1a;你通常编写代码的风…

实战!如何从零搭建10万级 QPS 大流量、高并发优惠券系统--图文解析

实战&#xff01;如何从零搭建10万级 QPS 大流量、高并发优惠券系统–图文解析 原文链接&#xff1a;https://juejin.cn/post/7087824893831544845 原文作者&#xff1a;字节跳动技术团队 需求背景 需要设计、开发一个能够支持十万级 QPS 的优惠券系统 什么是QPS? Queri…

集采商城,智能费控4.0的核心载体

纵观企业费控模式进化史&#xff0c;从1.0手工报销模式到2.0线上报销模式&#xff0c;再到3.0移动报销模式&#xff0c;企业对费用管控的模式与技术虽然在不断升级迭代&#xff0c;但始终没有将消费端纳入费控体系&#xff0c;难以形成完整链路和闭环。 智能费控4.0创新提出场景…

SpringBoot+Vue物流快递仓库管理系统

物流快递仓库管理是一项非常繁琐复杂的工作&#xff0c;每天要处理大量的单据数据&#xff0c;包括入库、出库、退库、调库等多项货物操作流程。因此&#xff0c;为提高库管工作的质量和效率&#xff0c;就必须根据仓库管理的特点开发库存物流信息系统。 本文立足于物流信息系…

基于大数据的计算机就业数据可视化分析项目

使用Python作为编程语言&#xff0c;配合MySQL数据库以及Hadoop和Spark等大数据处理工具&#xff0c;实现了数据的抓取、清洗、分析到可视化展示的整个流程。系统采用Scrapy爬虫框架从拉勾网招聘平台高效抓取计算机行业的就业数据。随后&#xff0c;通过Pandas库对数据进行了深…

三人同行免单模式:社交电商的新趋势

在当今社交电商日益繁荣的背景下&#xff0c;三人同行免单模式作为一种创新的购物激励机制&#xff0c;正逐渐受到消费者和品牌的青睐。该模式通过消费者之间的互动和分享&#xff0c;促进产品销售和品牌推广&#xff0c;实现消费者与品牌的双赢。 模式概述 三人同行免单模式的…

Bilibili开源发布轻量级 Index 系列语言模型:2.8T 训练数据,支持角色扮演

Bilibili首次发布 Index 系列模型中的轻量版本&#xff1a;Index-1.9B 系列 本次开源的 Index-1.9B系列包含以下模型&#xff1a; Index-1.9Bbase:基座模型&#xff0c;具有 19 亿 非词嵌入参数量&#xff0c;在 2.8T 中英文为主的语料上预训练&#xff0c;多个评测基准上与…

养猫的上班族还不买智能猫砂盆吗?自费测评好用合集来啦!

到底谁还在蹲点等下班然后冲回家给猫铲屎的&#xff1f;原来是以前的我啊&#xff0c;任劳任怨给猫铲屎&#xff0c;上完自己的班回家还要给猫上班&#xff0c;累死累活的真的受不了&#xff01;最后实在受不了&#xff0c;在网上看了各种智能猫砂盆的测评后果断购入&#xff0…

mysql中的lead函数和over函数

文章目录 mysql中的lead函数和over函数作用需求场景实现方法group by分组和使用over函数分组有什么区别&#xff1f; mysql中的lead函数和over函数 作用 over函数是用来分组加排序的&#xff0c;然后等over函数分好组排好序之后&#xff0c;再使用lead函数去找当前分组内的下…

JMeter详解

一、线程组 作用:线程组就是控制Imeter用于执行测试的一组用户 位置:右键点击测试计划’-->添加 -->线程(用户)--> 线程组 特点: 模拟多人操作线程组可以添加多个&#xff0c;多个线程组可以并行或串行取样器(请求)和逻辑控制器必须依赖线程组才能使用线程组下可以…

自动化测试:Autorunner的使用

自动化测试&#xff1a;Autorunner的使用 一、实验目的 1、掌握自动化测试脚本的概念。 2、初步掌握Autorunner的使用 二、Autorunner的简单使用 autoRunner使用方法 新建项目 a) 在项目管理器空白区域,右键鼠标,选择新建项目 b) 输入项目名后,点击[确定]. 在初次打开aut…

手机怎么自动切换ip地址

在数字化时代&#xff0c;网络IP地址不仅是设备在网络世界的标识&#xff0c;也是确保用户网络安全和数据隐私的关键因素。对于手机用户来说&#xff0c;在某些情境下可能需要自动切换IP地址&#xff0c;本文将为您介绍手机怎么自动切换IP地址。 随着网络技术的发展&#xff0c…

python项目(课设)——飞机大战小游戏项目源码(pygame)

主程序 import pygame from plane_sprites import * class PlaneGame: """ 游戏类 """ def __init__(self): print("游戏初始化") # 初始化字体模块 pygame.font.init() # 创建游戏…

CocosCreator 微信小游戏上架流程准备工作

前言 事前准备非常重要&#xff0c;因为有creator的助力&#xff0c;实际上开发小游戏往往很快&#xff0c;但是如果准备不足&#xff0c;上架及审核过程非常慢&#xff0c;往往游戏做好了&#xff0c;还得各种排队等审核&#xff0c;大多数开发者又不是腾讯白名单之内&#x…

在WordPress上添加亚马逊联盟链接的三种方法

在互联网快速发展的今天&#xff0c;很多人都希望通过网络来增加收入&#xff0c;而加入亚马逊联盟计划&#xff08;Amazon Associates&#xff09;无疑是一个不错的选择。如果你有一个WordPress网站&#xff0c;那么在文章中添加亚马逊联盟链接是个很好的变现方式。今天&#…

什么样的企业适合运用裂变拉新工具?深入解析

在当今数字化快速发展的时代&#xff0c;裂变拉新工具已成为许多企业吸引新用户、扩大市场影响力的重要手段。然而&#xff0c;并非所有企业都适合运用这种工具。林叔将探讨哪些类型的企业更适合运用裂变拉新工具&#xff0c;并分析其背后的原因。 首先&#xff0c;拥有高度用…

DDK电通拧紧MFC-S060控制器过流维修

一、DDK伺服拧紧轴控制器过流故障的成因 1. 电源电压过低&#xff1a;当电源电压过低时&#xff0c;控制器可能会出现过流现象。 2. 负载过大&#xff1a;当负载过大时&#xff0c;DDK电通拧紧机控制器MFC-S060的电流也会随之增大&#xff0c;可能导致过流故障。 3. 控制器内部…

2024年7月JLPT日语N1真题试卷和答案解析,《Navi日语社》小程序在线答题考试,你的专属考试助手,日语学习神器!

掌握日语&#xff0c;从日语社小程序开始。这款小程序专为日语学习者设计&#xff0c;提供全面的JLPT备考资源&#xff0c;包括日语N1至N5等级考试的历年真题和2024年最新题目。无论你是日语新手还是备考高手&#xff0c;都能在这里找到适合自己的学习路径。 核心功能&#xf…