首页 > 其他分享 >antd table 自定义折叠展开图标(示例)

antd table 自定义折叠展开图标(示例)

时间:2023-02-15 15:12:58浏览次数:40  
标签:自定义 visible 示例 record expandedRowKeys onExpand table

              expandable={{
                expandedRowKeys,
                onExpandedRowsChange: (expandedRows) => {
                  updateState((draft) => {
                    draft.expandedRowKeys = expandedRows.map((row) => row);
                  });
                },
                expandIcon: ({ expanded, onExpand, record }) =>
                  record.isFolder || record.nodeType === "team"
                    ? (
                      expanded
                        ? (
                          <CaretDownOutlined
                            style={{
                              fontSize: 16,
                              visibility: record.children?.length ? 'visible' : 'hidden',
                            }}
                            onClick={(e) => onExpand(record, e)}
                          />
                        )
                        : (
                          <CaretRightOutlined
                            style={{
                              fontSize: 16,
                              visibility: record.children?.length ? 'visible' : 'hidden',
                            }}
                            onClick={(e) => onExpand(record, e)}
                          />
                        )
                    )
                    : undefined,
              }}

 

标签:自定义,visible,示例,record,expandedRowKeys,onExpand,table
From: https://www.cnblogs.com/sangzs/p/17123112.html

相关文章

  • Vue 自定义指令-directives
    什么是自定义指令vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。局部自定义指令的使用<body><divid="app">......
  • 自定义跨域中间件
    fromdjango.utils.deprecationimportMiddlewareMixin​​classCorsMiddleware(MiddlewareMixin):  """屏蔽CORS跨域"""​  defprocess_response(self,reques......
  • Vue Grid Layout -️ 适用Vue.js的栅格布局系统(自定义页面)
    官网:https://jbaysolutions.github.io/vue-grid-layout/zh/github:https://github.com/jbaysolutions/vue-grid-layout 一个类似于Gridster的栅格布局系统,适用于Vue.j......
  • 附录E示例-Tin_3
    示例概述意图这个场景有一个很小的三角网(只有1.5K个三角形),中间没有空隙。 内容为地理参考:-地图投影MGA9456区的水平坐标为东距和北距,-垂直坐标为AHD,-水平和垂直基准......
  • [经验] 自定义数据集:TFRecord
    1.为什么要使用TFRecord?在使用TensorFlow自定义数据集时,最常用的格式是将数据集转换为TFRecord格式。TFRecord是一种高效的数据存储格式,可以将数据序列化为一个或多个文......
  • JAVA中的Comparable接口和自定义比较器
    Java中的自然排序自然排序定制排序自然排序TreeSet集合在存储数据时有一定的顺序,它会将一些数据进行比较,比较调用的是comparaTo()方法,该方法是在Comparable中定义的,自然排......
  • The `.update()` method does not support writable nestedfields by default. Write
    原因Serializers中,外表的字段如source="group.title"不能进行写入操作解决办法将外表字段设置为read_only=True,此时可能有人就会问了:前端字段传过来还是group字段的id......
  • 【OpenCV】-边缘检测汇总示例
    汇总之前:这一节还有一个scharr滤波器(也是算子)没有介绍,先介绍一下。。。1计算图像差分:Scharr()函数使用Scharr滤波器运算符计算x或y方向的图像差分,包含的参数与Sobel算子基......
  • 【OpenCV】图片尺寸放缩示例程序
    这次示例程序分别演示了用resize、pyrUp、pyrDown来让源图像进行放大缩小操作#include<opencv2/opencv.hpp>#include<opencv2/imgproc/imgproc.hpp>#include<opencv2/highgu......
  • iptables记录日志获取drop信息【原创】
    需求:想获取iptablesdrop85端口的具体信息iptables的配置如下:-AINPUT-ptcp-mtcp--dport85-mlimit--limit4/min-jLOG--log-prefix"Iptables-85:"#......