ant design vue嵌套表格子表无数据时不显示展开图标
根据用户体验,这个是必须实现的。。查了一下官网文档用expandIcon 是一个函数,具体用法如下:1.a-table 标签里定义:expandIcon=“expandIcon” 该方法,代码如下:<a-table :scroll="{y: dataSource.rowsHeight}"rowKey="id"@expandedRowsChange="expandedRowsChange
·
根据用户体验,这个是必须实现的。。
查了一下官网文档用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>
}
}
},
注释:放到代码里会有标红,应该是格式什么的不符合规范。但是可以实现功能,暂时先这么用了。如下图:
更多推荐
已为社区贡献6条内容
所有评论(0)