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>

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