今天在开发项目中，需要让table表格实现可展开效果，但是官网给的却是+号，挺不好看的，需要自定义按钮来让页面的table表格变好看。
官网的：

修改官网后的

这样看来确实好看多了。
话不多说，上代码：

<a-table
      :columns="columns"
      :data-source="data"
      :rowKey="(record) => record.id"
      :pagination="pagination"
      @change="handleTableChange"
       :expandIcon="expandIcon"
    >
    </a-table>

这个最主要的是 :expandIcon="expandIcon"这个，自定义展开图标，官方也给出了这个方法。
js的代码入下;

    expandIcon(props) {
        if (props.record) {
          if (props.expanded) {//有数据-展开时候图标
            return (
              <a
                style="color: 'black',margin-right:0px"
                onClick={(e) => {
                  props.onExpand(props.record, e);
                }}
              >
                <a-icon type="down" />{" "}
              </a>
            );
          } else {//有数据-未展开时候图标
            return (
              <a
                style="color: 'black' ,margin-right:0px"
                onClick={(e) => {
                  props.onExpand(props.record, e);
                }}
              >
                <a-icon type="right" />
              </a>
            );
          }
        } else {//无数据-图标
          return (
            <span style="margin-right:0px">
              <a-icon type="smile" />
            </span>
          );
        }
    },

这个判断可以利用后端返回的list中是否有数据来进行，有的话咱们就可以展示right和down的图标了，没有的话可以用其他图标代替。
此次就这样的，希望能够帮助我们这些快乐的程序员