效果图:
代码:
columns: [{
title: "指标",
dataIndex: "chapterName",
key: "chapterName",
align: "left",
width: "31%",
scopedSlots: { customRender: "chapterName" },
},
......
]
<a-table
:columns="columns"
:data-source="tableData"
:row-selection="rowSelection"
:expanded-row-keys.sync="expandedRowKeys"
:pagination="false"
:defaultExpandAllRows="true"
:rowKey="(record) => record.id"
>
<!-- 展开图标 -->
<template slot="expandIcon" slot-scope="props">
<span v-if="props.record.children.length > 0">
<div v-if="props.expanded" style="display: inline-block; margin-right: 10px" @click="(e) => {props.onExpand(props.record, e)}">
<a-icon type="down" />
</div>
<div v-else style="display: inline-block; margin-right:10px" @click="(e) => {props.onExpand(props.record, e)}">
<a-icon type="right" />
</div>
</span>
</template>
......
</a-table>