vue3 + antdv table 展开行 expandedRowRender 根据判断条件动态显隐展开行的 icon
BasicTable 是我们项目自定义封装了一下 antdv 的t able 不需要太关注,注意看expandIcon的用法即可。
·
BasicTable 是我们项目自定义封装了一下 antdv 的t able 不需要太关注,注意看expandIcon的用法即可
<BasicTable :expandIcon="expandIcon" @register="registerTable">
<template #expandedRowRender="{ record }">
<ExpandRows :parent-id="record.id" />
</template>
</BasicTable>
function expandIcon(props) {
// 不需要展开时,return个空即可
if (props.record.segmentedNot === 0) return h('a', {}, '');
// props.expanded当前行状态 展开为true,收起为false.
if (props.expanded) {
//有数据-展开时候图标
return h(
'a',
{
class: 'text-lg',
onClick: (e) => {
props.onExpand(props.record, e);
},
},
'-',
);
} else {
//有数据-未展开时候图标
return h(
'a',
{
class: 'text-lg',
onClick: (e) => {
props.onExpand(props.record, e);
},
},
'+',
);
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)