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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值