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

8月前作者：Frost-ZX 分类：Toy博客阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了解决 Ant TreeSelect（树选择）组件可以使用键盘选中 disabled（已禁用）项的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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

因此，如果要实现选项变为灰色且不可选的效果，需要同时将选项的 disabled 属性设置为 true，将 seletable 属性设置为 false。文章来源地址https://www.toymoban.com/news/detail-806083.html

到了这里，关于解决 Ant TreeSelect（树选择）组件可以使用键盘选中 disabled（已禁用）项的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vue2+ant-design-vue a-select组件二次封装(支持单选/多选添加全选/分页（多选跨页选中）/自定义label)

参数说明类型默认值 v-model 绑定值 boolean / string / number/Array - mode 设置’multiple’\\\'tags’多选（显示全选） String - optionSource 下拉数据源 Array - width select宽度（可以设置百分比或px） String 100% customLabel 是否自定义设置下拉label String - valueKey 传入的 option 数组中，要作为最终选择

2024年02月08日
浏览(30)
Vue通用下拉树组件@riophae/vue-treeselect的使用

这个是在若依框架无意中发现的一个下拉树通用组件。@riophae/vue-treeselect 是一个基于 Vue.js 的树形选择器组件，可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能，可以自定义选项的样式和模板。该组件易于使用和扩展，适用于各种类型的项目。 npm：https:

2024年01月16日
浏览(29)
antdvue tree-select树选择组件选中值显示label拼接父节点

最近使用antdv的a-tree-select实现一个功能：选中子节点需要拼接父节点如图所示问题就是没有直接的api可以支持记录一下解决方法原本的使用修改后总结就是利用labelInValue 属性处理显示的title

2024年02月13日
浏览(47)
Element UI 中使用el-cascader组件，可以选择任意一级的内容并取消单选框

当加入checkStrictly后就会出现单选框的问题，修改样式即可；这里使用的less语法，需要有less依赖，加入样式后如果没有生效，可以放在App.vue中的样式下

2024年02月04日
浏览(43)
如何vue使用ant design Vue中的select组件实现下拉分页加载数据，并解决存在的一个问题。

需求：拉下菜单中数据过多，200条以上，就会导致select组件卡死。所以需要使用滑动到底部使其分页加载可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件，并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现： 1、在组件中绑定 @popupScro

2023年04月20日
浏览(42)
Vue3 - 解决使用 Tailwindcss 后导致 UI 组件库样式受影响，引入后发现项目组件库的组件样式不对了（Element/Ant Design Vue/Naive UI/TDesign）

网上的教程都无法解决，但本文可以帮助您快速解决该问题。当项目引入 Tailwind css 后，使用 UI 组件库的某些组件时，发现有些样式丢失及显示错位、背景色丢失等问题，频发于【按钮组件】背景色丢失 | 【message消息提示组件】样式位置变形等，严重的整个组件库样式都乱

2024年02月07日
浏览(48)
键盘win键无法使用，win+r不生效、win键没反应、Windows键失灵解决方案（亲测可以解决）

最近几天发现自己笔记本的win键无法使用，win失灵了，但是外接键盘后则正常:。这个问题困扰了我一周，我都以为自己的枪神坏了。寻找了几个解决方法，网上看了好多好多稀里糊涂的办法，都是不管用的，这里给大家分享我的解法： 1：我的电脑其实是我按住Fn＋win，把

2024年02月04日
浏览(30)
Ant react 组件报错解决整理 4.4

1、[antd: Drawer] `visible` is deprecated which will be removed in next major version, please use `open` instead. 解决：将Drawer组件 visble 改为 open； 2、[antd: Descriptions] Sum of column `span` in a line not match `column` of Descriptions. 解决：默认一行显示三个，一个占位一行，如果想占多列，请使用表格。 3、[a

2024年02月12日
浏览(29)
treeSelect树组件设置父节点禁用

项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但父节点禁止点选，只能点击子节点。毫无疑问，选用的是 ant design vue 组件库的 treeSelect 组件。但该组件默认每一级节点都可以进行选择，不符合需求。于是开始看API，发现 treeData 的 props 有这样一个属性：

2024年02月06日
浏览(25)
[VUE]Element_UI 实现TreeSelect 树形选择器

最近在做一个人员管理系统，在增改用户信息时，可能会设置用户所在的部门，因为部门是多级的，于是想到用Element_UI的TreeSelect组件实现效果：安装完成后，打开package.json 可以看到@riophae/vue-treeselect的版本：在需要使用TreeSelect的组件中引入并将Treeselect加到components中：

2024年02月09日
浏览(28)