使用antd中带有多选框的treeSelect组件时,点击父级展开子级。

  1. 问题:
    使用antd中带有多选框的treeSelect组件时,点击小三角打开子级,因为小三角的图标有点小,产品那边让改成点击父级展开子级。
  2. 图例使用antd中带有多选框的treeSelect组件时,点击父级展开子级。_第1张图片
  3. 解决方法

    .ant-select-tree-switcher {
    
    position: relative;
    
    }
    
    .ant-select-tree-switcher_open::before, .ant-select-tree-switcher_close::before {
    
     content: '';
    
     position: absolute;
    
     right: -200px;
    
     top: 0;
    
     left: 0;
    
     bottom: 0;
    
    }
  4. 原理:
    通过给小三角图标的父级增加宽度,实际上还是点击小三角打开的子级;
    使用antd中带有多选框的treeSelect组件时,点击父级展开子级。_第2张图片
  5. 是如何增加宽度的?
    其实是通过插入一个元素,然后这个元素通过定位增加了宽度。

你可能感兴趣的:(antd前端css)