1.使用expandIcon属性
<a-table
:rowKey="(record) => record.id"
:loading="loading"
:columns="columns"
:data-source="data"
@expand="expand"
:expandIcon="expandIcon"
size="middle"
:pagination="false"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
>
<template slot="operation" slot-scope="text">
<i-btn text small v-if="isShowEdit" @click="addChiled(text)"
>新增
<a-divider type="vertical" style="margin-right: 0px" />
</i-btn>
<i-btn text small v-if="isShowEdit" @click="updata(text)"
>修改
<a-divider type="vertical" style="margin-right: 0px" />
</i-btn>
<i-btn text small v-if="isShowDelete" @click="deleted(text)"
>删除
<a-divider v-if="isShowPreview&&text.fieldTotal>0" type="vertical" style="margin-right: 0px" />
</i-btn>
<i-btn text small v-if="isShowPreview&&text.fieldTotal>0" @click="info(text)">预览 </i-btn>
</template>
<template slot="isCustom" slot-scope="text">
<i-badge v-if="text === 1" status="success" text="是"></i-badge>
<i-badge v-else status="default" text="否"></i-badge>
</template>
<template slot="tableName" slot-scope="text">
<div v-if="text">{{ text }}</div>
<div v-else>-</div>
</template>
<template slot="customSql" slot-scope="text">
<div v-if="text">{{ text }}</div>
<div v-else>-</div>
</template>
<a-table
:loading="childLoading"
slot="expandedRowRender"
slot-scope="inner"
:columns="innerColumns"
:data-source="inner.innerData"
:pagination="false"
class="child"
>
<template slot="actions" slot-scope="text">
<i-btn text small v-if="isShowEdit" @click="updataChile(text)"
>修改
<a-divider type="vertical" style="margin-right: 0px" />
</i-btn>
<i-btn text small v-if="isShowEdit" @click="deletedChile(text)"
>删除
</i-btn>
</template>
</a-table>
</a-table>
2.在methods里写方法
// table的expandIcon属性,修改默认展开关闭按钮 子表无数据时不显示展开图标
expandIcon(props){
if (props.record.fieldTotal){
if(props.record.fieldTotal > 0){
if (props.expanded) {
return <a style="margin-right:0px" onClick={e=> {
props.onExpand(props.record, e);
}}><a-icon type="caret-down"/> </a>
} else{
return <a style="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>
}
}
},