antDesign的tree中想实现点击整行选中。

最新推荐文章于 2024-05-29 17:12:06 发布
最新推荐文章于 2024-05-29 17:12:06 发布
阅读量703 收藏 10
点赞数 14
文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57158038/article/details/135849618
版权

先看下ant5官方的tree，只有点击文字后半段才会生效，前半段没有反应，但是我们实现的是整行点击生效。遇到这个问题怎么解决呢？

首先我们可以利用titleRender，定义一个元素，然后基于元素整行定位，注意要取消ant-tree-node-content-wrapper的定位，把定位加到ant-tree-treenode上，再提高展开收起的z-index，这样既不影响展开收起，也能实现点击整行达到onSelect生效

2024-01-26 09-33-38

南甜_
关注
  • 14
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
ant design 树形控件a-tree-select展开子级选项只能点左侧小三角形，希望能点击title文字就能展开
m0_54281425的博客
02-10 1319
通过小三角元素加一个伪元素让小三角点击范围覆盖右边文字部分，从而点击文字部分控制子级展开/收起，实际还是在操作小三角。另外通过hover来实现文字部分的背景，达到好的体验效果。：ant design 中tree选择器只能通过点击小三角展开子级，体验不太好，希望能点title文字展开/收起。
Ant Design Vue的a-tree组件实现点击文字选中/取消选中节点
Honiler的博客
08-03 5511
Ant Design Vue的a-tree组件实现点击文字选中/取消选中节点
Vue+AntDesignVue实现a-tree树形组件的层级全选选中功能
最新发布
xu1912715645的博客
05-29 816
Vue+AntDesignVue实现a-tree树形组件的层级选中功能
【antd的tree结构实现点击文字展开】
lomen26的博客
06-22 1504
antd Tree结构只能点击三角展开，改为点击文字也可以。import React from “react”; import { Tree } from “antd”;const { TreeNode} = Tree;class MyTree extends React.Component { state = { expandedKeys: [], } onExpand = (expandedKeys) => { this.setState({ expandedKeys }); } onSelect =
antd中tree树点击文字展开节点、同级只展开一个节点及获取半选节点
lowers_1的博客
07-16 5156
antd中tree树点击文字展开节点、同级只展开一个节点及获取半选节点
ant.d中Tree组件默认选中和展开
weixin_43443341的博客
04-14 8298
ant.d中Tree组件默认选中和展开 const rootId = 'all' <Tree defaultExpandedKeys={[rootId]} defaultSelectedKeys={[rootId]} selectedKeys={[this.state.curTreeNode.key]} treeData={this.state.treeData}> ...
Ant design vue table 单击行选中 勾选checkbox
double_hll123的博客
09-05 1万+
最近了解Ant design 设计table 单击行选中checkedbox功能，相比于element的 @row-click 再触发toggleRowSelection，ant design的api就没那么清晰了，言归正传 期望:Ant design table单击行选中 勾选checkedbox 实现: 单选： onClickRow(record) { re...
Vue版AntDesignPro基于Elementui实现
08-10
在本项目中，开发者选择Element-ui作为基础，以实现类似Ant Design Pro的高级功能和界面效果。 首先，让我们深入了解一下Element-ui。Element-ui提供了丰富的组件集合，包括表格、按钮、提示、通知、对话框、布局、...
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
10-23
在本文中，我们将深入探讨如何使用jQuery和EasyUI库实现一个具有级联选中功能的CheckBoxTree组件。CheckBoxTree是一种常见的UI元素，常用于展示层级结构的数据，并允许用户通过复选框选择或取消选择整条数据路径。在...
解决ant design vue中树形控件defaultExpandAll设置无效的问题
01-18
页面步骤： 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果： 设置defaultExpandAll无效，并不能展开所有...补充知识：Ant Design 中Tree踩坑 Tree中的api属性
jstree中的checkbox默认选中和隐藏示例代码
10-15
主要介绍了jstree的checkbox默认选中和隐藏,需要的朋友可以参考下
react项目使用了 Ant Design等需要三级联动的省市区资源库
11-26
let cityData = { "RECORDS": [ { "value": 110000, "label": "北京", "children": [{ "value": 110100, "label": "北京", "children": [{ "value": 110101, ...Ant Design组件三级联动资源库必备
【antd-vue】 a-tree 点击节点文字展开或收缩子节点
qq_46617584的博客
03-28 3009
【antd-vue】 a-tree 点击节点文字展开或收缩子节点
antd 中 Tree 的使用-默认选中问题
datouniao1的博客
04-01 8554
使用antd的Tree 控件的控件的时候，数据回显的时候发现所有的都选中了，很奇怪 默认选择的节点，为什么选中了所有的节点 并且有一个特点是，如果父节点是选中状态，那么子节点就默认选中了，那么这样的回显并不是准确的，所以问题在于当回显的时候父节点被选中了，子节点不需要被选中
react-antd Tree(树形组件)默认展开和选中踩坑及使用
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-06 1万+
前言： 项目中使用antd-Tree组件（树形组件），要求默认展开编辑时默认选中，但是展开之后在点击收缩，和选中就无法选中了。必须配合onExpand和onCheck事件。 一、项目环境 react: 16 antd :3.x （本篇内容也适用于antd 4x版本） 二、使用Tree 业务要求： 默认展开树结构，编辑时勾中已选中的 引入Tree和TreeNode 写生成树结构函数 添加展开key值和选中key值 代码如下： 一般不会使...
Antd的Tree组件收起展开热区扩展
qq_41549657的博客
07-08 2660
实现Antd的tree组件通过点击节点所在热区就能完成节点的收起与展开
ant design vue(vue3)的a-tree组件点击文字实现菜单展示
qq_55681529的博客
09-06 1357
我们把文档中的两个值都打印出来，发现我们点击小三角得到值是我们所点击行对应的key值，主要是就把我们文字所得到的key绑定到expandedKeys上，就可以实现点击文字实现展开。首先进行一个判断，我们展开值expandedkeys里面有没有 值，如果没有值，直接点击文字是不生效的，如果没有值，这一步直接把key赋给它就好了。首先是选中文字的函数，我们可以得到一个key跟name,key就相当于是一个主键，name就是我们所点击行的信息。expandeKeys绑定到a-tree的值，它选中的值会默认展开。
Ant Design - 组件之 Tree树形控件
sgjy_15522801752的博客
05-10 1044
针对tree树形组件封装了一个树形组件。
ant design Tree 动态默认选中
05-31
Ant Design 的 Tree 组件可以通过 `defaultCheckedKeys` 属性来设置默认选中的节点，但是这个属性只能用于静态渲染的情况下，如果需要动态渲染树并且设置默认选中节点，可以使用 `checkedKeys` 属性和 `onCheck` 事件来实现。 具体实现方法如下： 1. 在组件的 `state` 中定义一个 `checkedKeys` 数组，用于存储当前选中的节点。 ```jsx state = { checkedKeys: [], } ``` 2. 在组件的 `componentDidMount` 生命周期中，根据需要设置默认选中的节点，并将选中的节点存储到 `checkedKeys` 数组中。 ```jsx componentDidMount() { // 获取需要默认选中的节点数据，这里假设是从服务端异步获取的 const checkedNodes = [{key: '1-1'}, {key: '2-2'}]; // 将选中的节点的 key 存储到 checkedKeys 数组中 const checkedKeys = checkedNodes.map(node => node.key); this.setState({ checkedKeys }); } ``` 3. 在组件的 `render` 方法中，将 `checkedKeys` 数组、`onCheck` 事件和其他属性一起传递给 `Tree` 组件。 ```jsx render() { return ( <Tree checkable checkedKeys={this.state.checkedKeys} onCheck={this.handleCheck} // 其他属性 > {/* 树节点 */} </Tree> ); } ``` 4. 在组件中定义 `handleCheck` 方法，用于处理节点选中状态的变化，并将选中的节点的 key 存储到 `checkedKeys` 数组中。 ```jsx handleCheck = (checkedKeys) => { this.setState({ checkedKeys }); } ``` 这样，就可以动态设置默认选中的节点了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南甜_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值