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

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Ant Design Vue树形表格是一种基于Vue框架的组件,它可以用于展示具有层级关系的数据,例如文件夹结构、组织架构等。它具有可折叠、可拖拽、可排序等功能,可以方便地进行数据操作和展示。同时,Ant Design Vue树形表格还支持自定义样式和事件处理,可以满足不同场景下的需求。 ### 回答2: ant design vue树形表格是一种在vue框架下运用ant design组件库所开发的一种数据可视化展示方式。它不仅展示了表格数据的基本信息,而且通过嵌套层级的方式体现了数据的层次结构,让数据在视觉上更加直观、易于理解。树形表格可以应用于多个领域,如企业组织结构展示、财务数据展示等。 在实现树形表格时,需要通过父子关系的方式来描述数据之间的递进关系。在vue开发过程中,可以通过递归组件来实现树形表格的展示。ant design vue提供了一套完整的树形表格组件库,它可以帮助开发者轻松实现树形表格的各种样式和功能上的需求。 ant design vue树形表格的特点包括:可折叠展开、拖拽排序、筛选搜索、单元格编辑等。同时,ant design vue树形表格样式也很美观、简洁,其风格也与ant design组件库的整体风格相呼应。开发者可以根据实际需求自由选择样式和功能,轻松实现自己想要的树形表格。 总的来说,ant design vue树形表格是一种功能强大、样式美观、易于使用的数据可视化展示方式,为开发者提供了极为方便的数据呈现方式。在企业信息化建设等领域应用广泛,为企业提供了更清晰的数据知晓方式,也提升了企业的数据处理效率。 ### 回答3: ant design vue树形表格是一个功能强大的Vue组件,它可以显示任意层级的数据,并支持展开/收起节点、勾选节点、展开/收起所有节点、获取勾选节点等多种操作。在数据量比较大、需要展示关系的数据时,使用树形表格会增加用户的使用体验,提高数据呈现的可读性和易用性。 ant design vue树形表格的核心思想是将树型结构转换为表格形式,每个节点都对应着表格中的一行数据。在这个组件中,我们可以通过配置来实现表格样式、节点的展示、事件的响应等等。而且它提供了一系列的API,使得我们可以方便地控制数据的展示和交互,例如通过调用expandAll()方法一键展开所有节点,或者通过调用getRowKeys()方法获取当前勾选的节点。 在实际使用中,ant design vue树形表格的灵活性和可扩展性也给我们带来了很大的便利。我们可以通过自定义列、自定义节点、自定义图标等等组件和样式来满足不同的需求。同时,组件本身也支持多种选择器,方便我们快速定位到所需节点,进而进行数据操作。 在总体设计上,ant design vue树形表格的目标是提供一个易用、可靠、高性能、高度可定制的组件,方便处理大量数据和处理包含嵌套关系的数据。总的来说,它是一个出色的表格组件,强烈推荐使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值