vue 项目使用iview如何做到table嵌套table

1:首先看效果图

2.这里是使用的table表单组件，组件里面有一个 table-expand 属性需要使用，所以需要引入，我是只有一个组件需要这个属性，所以直接在组件中引入
3:在根据render函数的方式使用
父组件代码

<template>
    <Table :columns="columns10" :data="data9">
        <template slot="action" slot-scope="{ row }">
                    <Button
                            size="small"
                            type="text"
                            @click="handDetails(row)"
                    >
                        详情</Button>
                    <Button
                            size="small"
                            type="text"
                            @click="ShowaddOrder()"
                    >
                        开单</Button>
                    <!--<Button-->
                            <!--size="small"-->
                            <!--type="text"-->
                            <!--@click="editorModal('bj')"-->
                    <!--&gt;-->
                        <!--编辑</Button>-->
                    <!-- <Dropdown trigger="click" :transfer='transfer' style="margin-left: 10px">
                        <a href="javascript:void(0)">
                            更多
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem  @click.native="Showdiscount(row)">
                                折让
                            </DropdownItem>
                            <DropdownItem @click.native="handDetails('SH')">
                                经理审核
                            </DropdownItem>
                            <DropdownItem @click.native="OutTicketMange()">
                                开票
                            </DropdownItem>
                            <DropdownItem @click.native="OrderConfirm(row)">
                                开单确认
                            </DropdownItem>
                            <DropdownItem @click.native="ChildModal(row)">
                                子订单列表
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown> -->
                </template>
    </Table>
</template>

js

<script>
import expandRow from './table-expand'
export default {
        components: { expandRow },
        data () {
            return {
                columns10: [
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(expandRow, {
                                props: {
                                    row: params.row
                                }
                            })
                        }
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    },
                    
                     {
                        title:  '操作',
                        width: 180,
                        fixed: 'right',
                        slot: 'action'
                    }
                ],
                data9: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        job: 'Data engineer',
                        interest: 'badminton',
                        birthday: '1991-05-14',
                        book: 'Steve Jobs',
                        movie: 'The Prestige',
                        music: 'I Cry'
                    },
                    {
                        name: 'Jim Green',
                        age: 25,
                        address: 'London No. 1 Lake Park',
                        job: 'Data Scientist',
                        interest: 'volleyball',
                        birthday: '1989-03-18',
                        book: 'My Struggle',
                        movie: 'Roman Holiday',
                        music: 'My Heart Will Go On'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        job: 'Data Product Manager',
                        interest: 'tennis',
                        birthday: '1992-01-31',
                        book: 'Win',
                        movie: 'Jobs',
                        music: 'Don’t Cry'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        job: 'Data Analyst',
                        interest: 'snooker',
                        birthday: '1988-7-25',
                        book: 'A Dream in Red Mansions',
                        movie: 'A Chinese Ghost Story',
                        music: 'actor'
                    }
                ]
            }
        }
    }
</script>

4:这个时候你就需要在新建新的组件，并在当前项目中引入,我新建了table-expand组件
子组件

<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
</style>
<template>
    <div>
        <Table height="200" :columns="columnsdata" :data='tabledata'>
           <template slot="action" slot-scope="{ row }">
                    <Button
                            size="small"
                            type="text"
                            @click="handDetails(row)"
                    >
                        删除</Button>
                    <Button
                            size="small"
                            type="text"
                            @click="ShowaddOrder()"
                    >
                        添加</Button>
                    <!--<Button-->
                            <!--size="small"-->
                            <!--type="text"-->
                            <!--@click="editorModal('bj')"-->
                    <!--&gt;-->
                        <!--编辑</Button>-->
                    <!-- <Dropdown trigger="click" :transfer='transfer' style="margin-left: 10px">
                        <a href="javascript:void(0)">
                            更多
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem  @click.native="Showdiscount(row)">
                                折让
                            </DropdownItem>
                            <DropdownItem @click.native="handDetails('SH')">
                                经理审核
                            </DropdownItem>
                            <DropdownItem @click.native="OutTicketMange()">
                                开票
                            </DropdownItem>
                            <DropdownItem @click.native="OrderConfirm(row)">
                                开单确认
                            </DropdownItem>
                            <DropdownItem @click.native="ChildModal(row)">
                                子订单列表
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown> -->
                </template> 
        </Table>
    </div>
</template>
<script>
    export default {
        props: {
            row: Object
        },
        data(){
            return{
                tabledata:[],
        columnsdata:[     
            {
                        type: 'selection',
                        align: 'center',
                        width:'100'
                    }, 
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    },
                    {
                        title: '音乐',
                        key: 'music'
                    },
                    {
                        title: '书',
                        key: 'book'
                    },
                    {
                        title: '工作',
                        key: 'job'
                    },
                    {
                        title: '操作',
                        width: 130,
                        fixed: 'right',
                        slot: 'action'
                    },
                    ]
               
            }
            },
 created() {
     this.tabledata.push(this.row)          
        },
    };

</script>

哪里需要改正请在评论区，谢谢