vue+iview-table点击展开展示内容，表格嵌套

实现如下效果的表格嵌套：

点击展开，展示tabs。

table的columns里设置展示的属性，然后属性里设置返回一个组件，然后在组件里写嵌套的内容。

 

<Table :columns="tableColumns" :data="tableData" style="width:100%" @on-selection-change="handleSelection"><template #result="{ row, index }"><Button type="success" size="small" style="margin-right: 5px" v-if="row.result === '成功'">成功</Button><Button type="error" size="small" style="margin-right: 5px" v-if="row.result === '失败'">失败</Button></template></Table>

主要是tableColumns的设置：

第一个对象是table的勾选按钮；

第二个对象是点击展开的嵌套按钮，里面的ReviewPlanCode是组件，然后嵌套的tabs的内容都写到组件里。

和table一个页面的vue里引用ReviewPlanCode组件；

import ReviewPlanCode from './ReviewPlanCode';

components: { ReviewPlanCode },

tableColumns: [{type: 'selection',width: 60,align: 'center'},{key: 'action',type: 'expand',width:'30px',render: (h,  row) => {return h(ReviewPlanCode, {props: {caseData: row.row}})}},{title: '执行计划',key: 'fileName',},{title: '创建时间',key: 'time'},{title: '创建人',key: 'operator',width:'150px',},{title: '执行结果',key: 'result',width:'150px',slot: 'result'}],

ReviewPlanCode组件内容：

<template><Card><Tabs value="name1"><TabPane label="执行结果" name="name1"><Table :columns="tableColumns" :data="tableData" style="width:100%" @expand="handleTableExpand(row)" @on-selection-change="handleSelection"><template #result="{ row, index }"><Button type="success" size="small" style="margin-right: 5px" v-if="row.result === '成功'">成功</Button><Button type="error" size="small" style="margin-right: 5px" v-if="row.result === '失败'">失败</Button></template></Table></TabPane><TabPane label="计划详情" name="name2" ><pre v-highlight><code style="height:300px;overflow: auto;"> {{ code }}</code></pre></TabPane></Tabs></Card>
</template><script>import { reviewCase } from '../../../api/webUI';
export default {name: 'ReviewPlanCode',props: {caseData:{type: Object,}},