最近在写antd vue框架的后台管理系统，需要实现下面的需求：

根据需求，发现需要自定义展开图标：这个是图标的属性，需要通过:expandIcon="customExpandIcon"的方式来处理。

点击展开图标后，需要异步调取接口获取数据，@expand="tableExpand"

1.:expandIcon="customExpandIcon"自定义展开图标

hasOrder：根据这个参数来判断是否要有展开的图标。

customExpandIcon(props) {
  if (props.record && props.record.hasOrder) {
    if (props.expanded) {
      return (
        <a-icon
          style="color: rgba(0,0,0,0.4);padding:10px 5px;box-sizing:border-box;"
          type="minus-square"
          onClick={(e) => {
            props.onExpand(props.record, e);
          }}
        />
      );
    } else {
      return (
        <a-icon
          style="color: rgba(0,0,0,0.4);padding:10px 5px;box-sizing:border-box;"
          type="plus-square"
          onClick={(e) => {
            props.onExpand(props.record, e);
          }}
        />
      );
    }
  } else {
    return <span></span>;
  }
},

2.@expand="tableExpand"点击展开图标后异步获取数据

//展开行
async tableExpand(expanded, record) {
  if (expanded && record.hasOrder && !record.children) {
    //获取订单的列表
    this.childLoading = true;
    await getOrderMainList({
      ProjectId: record.id,
      pageIndex: 1,
      pageSize: 1000,
    })
      .then((res) => {
        if (res.success) {
          record.children = (res.data && res.data.items) || [];
        } else {
          this.$message.error(res.message);
          record.children = [];
        }
        this.$forceUpdate();
      })
      .finally(() => {
        this.childLoading = false;
      });
  }
},

功能实现！！！