根据用户体验,这个是必须实现的。。
查了一下官网文档用expandIcon 是一个函数,具体用法如下:
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里定义该方法:**就可以实现了

  // 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>
          }
        }
      },

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

Logo

前往低代码交流专区

更多推荐