首页 > 其他分享 >解决 Ant TreeSelect(树选择)组件可以使用键盘选中 disabled(已禁用)项的问题

解决 Ant TreeSelect(树选择)组件可以使用键盘选中 disabled(已禁用)项的问题

时间:2024-01-19 21:23:20浏览次数:34  
标签:选项 disabled Ant 选中 组件 TreeSelect 键盘 属性

最近在使用 Ant Design Vue(V3.2.20)的 TreeSelect 组件时发现一个问题:tree-data 中部分数据的 disabled 属性设置为了 true,选项是“禁用”状态,无法通过鼠标点击选中,但是可以通过键盘 键切换选项,按下 Enter 键选中。

一开始还以为是 bug,后来通过查阅 文档 和测试发现,该组件还有一个名为 selectable 的属性,用于控制选项是否可选。

仅将选项的 selectable 属性设置为 false 时,对应的选项虽然文本颜色不变,但是不可通过点击或键盘选中。

因此,如果要实现选项变为灰色且不可选的效果,需要同时将选项的 disabled 属性设置为 true,将 seletable 属性设置为 false

标签:选项,disabled,Ant,选中,组件,TreeSelect,键盘,属性
From: https://www.cnblogs.com/frost-zx/p/17975652/fix-ant-tree-select-can-select-disabled-item

相关文章

  • Vantage客服我们很安全,牌照自己公司授权使用?
    今日是iFXEXPO,迪拜世博展的最后一天~不过今天真相哥要带大伙看的是,昨天参展的券商Vantage~从这次展会的赞助商展牌来看,Vantage在此次展会中的规模应该是中等偏下的,Vantage和STARTRADERPRIME以及UltimaMarkets独占一栏,而Exness可谓是这次展会的老大,,独占“C”位~话题扯远了,让我们......
  • vue+antd-vue(自定义iconfont图标组件)
    1.方式一代码如下import{createFromIconfontCN}from'@ant-design/icons-vue';constIconFont=createFromIconfontCN({scriptUrl:newURL('./assets/font/iconfont.js',import.meta.url).href});app.component('IconFont',IconFont);......
  • 异步加载树形组件(antd-vue)
    1、html<a-directory-tree:tree-data="useDataSourceTreeList"v-model:selectedKeys="selectedKey"v-if="datasourceId"blockNodeclass="tree-card":showIco......
  • antd表格中默认展开所有行,expandable下的defaultExpandAllRows属性失效
    antd表格中默认展开所有行,expandable下的defaultExpandAllRows属性失效原因:dom节点渲染时defaultExpandAllRows是生效的,但此时还没有数据,当表格组件拿到数据时会重新渲染表格组件,导致defaultExpandAllRows失效解决:给表格组件Table绑定一个随机key(本文使用的是reduxjs/toolkit下......
  • antd中transfer穿梭框组件双击移动数据
    antd中transfer穿梭框组件双击移动数据需求:双击任意标题,实现穿梭功能,而不影响搜索功能使用render可以自定义标题,若在外层套了div,则需要重写filterOption方法,否则搜索会报错此案例在div上添加了onDoubleClick双击事件,实现双击移动需求完整代码:import{Transfer}from'ant......
  • 初中英语优秀范文100篇-060It's Important to Read Books-读书很重要
    PDF格式公众号回复关键字:SHCZFW060记忆树1Frommypointofview,asaGradeNinestudent,readingbooksisveryimportant.翻译从我的观点来看,作为一名九年级学生,阅读书籍非常重要。简化记忆重要句子结构"Frommypointofview"是一个介词短语,作为整个句子的状......
  • AntDesign文件上传前端文件类型控制 不采用Upload.IGNORE来限制出现在upload_list中
    <a-form-item label="附件" :label-col="{span:4}" :wrapperCol="{span:4}" :colon="false" > <divclass="upload"> <a-upload :fileList="uploadFileList&qu......
  • vue3使用 vant ui 3 如何获取组件 popup dom的高度?
    我目前使用的是vant-ui 3.1.2popup弹出层组件,我想要获取弹出层的高度来计算一些东西,但是使用常规定义refdom的方式总是无法获取,最终找到方案如下:vant-ui官方文档:https://vant-contrib.gitee.io/vant/v3/#/zh-CN/popup<template><van-popupv-model:show="show......
  • IDEA画图神器 PlantUML
    PlantUML是一款开源的UML图绘制工具,支持通过文本来生成图形,使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。下面使用PlantUML来绘制一张流程图,可以实时预览,速度也很快!在线安装首先在IDEA的插件市场中搜索PlantUML,安装这个排名第一的插件;......
  • AntDesignBlazor示例——暗黑模式
    本示例是AntDesignBlazor的入门示例,在学习的同时分享出来,以供新手参考。示例代码仓库:https://gitee.com/known/BlazorDemo1.学习目标暗黑模式切换查找组件样式覆写组件样式2.添加暗黑模式切换组件1)双击打开MainLayout.razor文件,在header区域添加Switch组件及其事件来......