博客

vue+antd自定义table展开按钮

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

最主要是这个expandIcon属性

    expandIcon(props) {
        //props.record是当前每行数据,(也可以依据每行数据的属性判断,如:props.record.id,props.record.key等等,这个依据自己的需求字段属性)
        
        //复制的兄弟需要把props.record.leafTag改为自己的属性!!!!!!这个很重要
        
        if (props.record.leafTag) {
        //props.expanded当前行状态 展开为true,收起为false.
        //有兴趣的可以把props全部打印出来看下
          if (props.expanded) {//有数据-展开时候图标
            return (
              <a
                style="color: black;"
                onClick={(e) => {
                  props.onExpand(props.record, e);
                }}
              >
                <a-icon type="minus-square" />{" "}
              </a>
            );
          } else {//有数据-未展开时候图标
            return (
              <a
                style="color: black;"
                onClick={(e) => {
                  props.onExpand(props.record, e);
                }}
              >
                <a-icon type="plus-square" />
              </a>
            );
          }
        } else {//无数据-图标
        //这里我选择的是没有的话就不渲染
          return (
            <span></span>
          );
        }
    },

效果图