修改Ant Design Vue树形表格的展开图标样式
1. a-table标签里定义 :expandIcon=“expandIcon” 方法<a-table :scroll="{y: dataSource.rowsHeight}"rowKey="id"@expandedRowsChange="expandedRowsChange"@expand="expand"
·
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>
}
}
}
注释:
放到代码里会有标红,应该是格式什么的不符合规范。但是可以实现功能,暂时先这么用了。如下图:
更多推荐
已为社区贡献15条内容
所有评论(0)