找到需要替换的节点


现在需要将箭头替换为其他icon（element的icon都可以），在F12下找到相应节点：


可以看到content中的就是箭头icon，现在只需要在css中直接覆盖这个就行了。
替换css
 // 将el-table的展开图标替换为其他图标
  .el-table__expand-icon{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .el-table__expand-icon 
  .el-icon-arrow-right:before{
    content: "\e6d9";
    border: 1px solid #ccc;
    padding: 2px;
  }

  .el-table__expand-icon--expanded
  .el-icon-arrow-right:before{
    content: "\e6d8";
  }

此处是将箭头替换为el-icon中的加减图标，当然加了一点边框修饰，这点不重要。

替换效果如下：



其中最上面的css是为了设置展开或者收起时，不发生旋转。

程序开始运行时进行设置

 
          UIManager.put("Tree.expandedIcon", Icon);

1、需求： 实现点击展开图标获取后台数据，将其渲染到表格中，没有分页；
效果图如下：


具体实现
这里有两个问题我做起来比较费劲，花了大半个下午的时间才找到解决问题的方法，一个就是点击展开图标的方法是哪个（expandable属性下的onExpand()），另一个就是找到点击展开图标调后台数据之后，如何让表格刷新(actionRef.current?.reload();)。

先放代码，在仔细讲一下里面的属性：

1：结构
	<ProTable<DeptListItem>
        actionRef={actionRef}
        rowKey="id"
        search={false}
        request={() => getDeptList(deptId)}
        columns={columns}
        expandable={{
          indentSize: 20,
          onExpand: (expanded, record) => { getChildList(expanded, record) }
        }}
      />


request：调接口获取后端数据渲染到页面上

getDeptList：调用后端接口方法，可根据自己的业务需求向相应的修改
  // 获取组织架构列表的数据
  const getDeptList = async (id: number) => {
    const result = await getDeptListData(id).then((response) => {
      setDeptArr(deptArr.concat(response.data))
      // 将原来的数据和这次后端请求的数据合并
      const resData = deptArr.concat(response.data)
      // deteleObject():去重数组对象中的重复项
      const arr: DeptListItem[] = deteleObject(resData);
      // resetTree(arr)：转化成树结构的格式
      setDeptData(resetTree(arr));
      // 返回格式一定要这种格式{data:最终的树结构数据}
      return { data: resetTree(arr) }
    });
    return result;
  };

expandable：点击展开图标从后台获取他的子数据
// 获取子节点
  const getChildList = async (expanded: boolean, record: any) => {
    const hasChildren = record.children.length > 0
    // 判断是否点击的数据下的子节点children是否为空，就调用接口
    if (expanded && !hasChildren) {
      await getDeptList(record.id)
      // 手动触发表格刷新，数据就刷新拉
      actionRef.current?.reload();
    }
  }

actionRef：自定义触发，actionRef.current?.reload();点击获取到数据的时候调用这段代码，就会触发列表的重新渲染，如果没有这段代码的话，数据是获取到了，但是页面不会渲染的。

actionRef是这么来的哈
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
const actionRef = useRef<ActionType>();

好了，这就是这个功能的基本实现~

动态加载jstree，只列出第一级父节点，无子节点，此时状态如下（无展开图标）：
我们继续往下看：

如上图所示，其实jstree的展开图标是一直存在的，只是通过右边的background-position来控制显示的样式（是展开图标，闭合图标，还是横线，复选框等等），那么我们接下来就来改变一下背景坐标试试看。

↑是checkbox样式

↑是展开的实心三角标
好了，接下来换成我这次项目需求的样式。Css设置如下：
.jstree-default .jstree-leaf:not(.last-children) > .jstree-ocl {
    background-position: -100px -4px;
}