修改Ant Design Vue树形表格的展开图标样式

快来打我* 2023-03-01 03:15 9阅读 0赞

##### 1. a-table标签里定义 :expandIcon=“expandIcon” 方法 #####

<a-table :scroll="{y: dataSource.rowsHeight}"
                               rowKey="id"
                               @expandedRowsChange="expandedRowsChange"
                               @expand="expand"
                               @change="change"
                               :expandedRowKeys="expandedRowKeys"
                               :columns="configColumns"
                               :dataSource="form.numericalValueIndexVos"
                               :pagination="false"
                               :expandIcon="expandIcon"
                               class="table-parent"
                               ref="tablePar"
                               :locale="{emptyText: '暂无数据'}">

##### 2. methods里定义 expandIcon 方法 #####

// table的expandIcon属性，修改默认展开关闭按钮 子表无数据时不显示展开图标
          expandIcon(props){
            if (!validatenull(props.record.numericalConditionVos)){
              if(props.record.numericalConditionVos.length > 0){
                if (props.expanded) {
                  return <a style="color: 'black',margin-right:0px" onClick={e=> {
                    props.onExpand(props.record, e);
                  }}><a-icon type="caret-down"/> </a>
                } else{
                  return <a style="color: 'black' ,margin-right:0px" onClick={e => {
                    props.onExpand(props.record, e);
                  }}><a-icon type="caret-right"/></a>
                }
              }else{
                return <span style="margin-right:0px"><a-icon type="smile" /></span>
              }
            }
          }

**注释：**  
放到代码里会有标红，应该是格式什么的不符合规范。但是可以实现功能，暂时先这么用了。如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thc3NpYWFhYQ_size_16_color_FFFFFF_t_70_pic_center_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thc3NpYWFhYQ_size_16_color_FFFFFF_t_70_pic_center_pic_center]: /images/20230209/4d8a271cb0e440db80c86c7abaa3915a.png