使用antd-vue 的a-table自定义展开图标

效果图：

代码：

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>