vue3 + antdv table 展开行 expandedRowRender 根据判断条件动态显隐展开行的 icon

BasicTable 是我们项目自定义封装了一下 antdv 的t able 不需要太关注，注意看expandIcon的用法即可

<BasicTable :expandIcon="expandIcon" @register="registerTable">
   <template #expandedRowRender="{ record }">
     <ExpandRows :parent-id="record.id" />
   template>
 BasicTable>
1
2
3
4
5

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);
        },
      },
      '+',
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31