自定义ant中table表格的展开图标修改ant-vue-design中嵌套表格table的expandIcon自定义图标

本是古典何须时尚 2021-07-24 11:03 2272阅读 0赞

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]  
1.![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]

<a-table
                :expandIcon="expandIcon"
                :loading="loading"
                :columns="columns"
                :data-source="data"
                class="components-table-demo-nested"
                @change="onChangeTable"
                :scroll="{x:1300,y:y}"
                :pagination="pagination"
                :locale="locale"
              >

2.在方法methods下加入方法

expandIcon(props) { 
          // console.log(props);
            if (props.record.fileInfoList.length > 0) { 
              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>
              );
            }
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/8d57c7d5845645d190500ebc414c07aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/8878cb942acb4db08ce9d2fab89d5378.png