Table - 嵌套子表格
一、效果展示二、代码实现一、效果展示
功能1：添加主表格一行
功能2：添加某个子表格一行
功能3：子表格数据的异步加载
二、代码实现
<template><div><a-button @click="add" type="primary" size="small" style="margin:20px">添加主表格数据</a-button><a-table:columns="columns":data-source="data"class="components-table-demo-nested"@expand="getInnerData"@expandedRowsChange="expandedRowsChange"style="margin:20px"><a slot="operation" slot-scope="row" @click="addInnderData(row)">添加子表格数据</a><a-tableslot="expandedRowRender"slot-scope="inner":columns="innerColumns":data-source="inner.innerData":pagination="false"><span slot="operation" slot-scope="text" class="table-operation"><a-dropdown><a-menu slot="overlay"><a-menu-item>Action 1</a-menu-item><a-menu-item>Action 2</a-menu-item></a-menu><a>More<a-icon type="down" /></a></a-dropdown></span></a-table></a-table></div></template><script>const columns = [{title: 'Name', dataIndex: 'name', key: 'name' },{title: 'Sex', dataIndex: 'sex', key: 'sex' },{title: 'Age', dataIndex: 'age', key: 'age' },{title: 'Hobby', dataIndex: 'hobby', key: 'hobby' },{title: 'Action', key: 'operation', scopedSlots: {customRender: 'operation' } },];const innerColumns = [{title: 'Name', dataIndex: 'name', key: 'name' },{title: 'Sex', dataIndex: 'sex', key: 'sex' },{title: 'Age', dataIndex: 'age', key: 'age' },{title: 'Hobby', dataIndex: 'hobby', key: 'hobby' },{title: 'Action',dataIndex: 'operation',key: 'operation',scopedSlots: {customRender: 'operation' },},];export default {created() {this.init() // 获取主表格数据},data() {return {data: [],columns,innerColumns,expandedRowKeys: []};},methods: {/** 功能：表格展开行的集合* 参数：expandedRowKeys:展开行的key形成的数组*/expandedRowsChange(expandedRowKeys) {this.expandedRowKeys = expandedRowKeys},/** 功能：加载主表格数据* 说明：此处采用键值对的形式，是为了避免全部子表格数据相同*/init() {this.data.push({key: 0,name: '小红',sex: '女',age: '18',hobby: '唱歌',innerData: []}, {key: 1,name: '小明',sex: '男',age: '25',hobby: '打篮球',innerData: []}, {key: 2,name: '小兰',sex: '女',age: '15',hobby: '看书',innerData: []})console.log(this.data);console.log('主表格加载完');},/** 功能：点击某行加号，加载子表格数据* 参数：expanded：是否展开 * 参数：record：点击行的数据*/getInnerData(expanded, record) {if (expanded) {// 当展开子表格时，才会加载子表格数据if (record.key === 0) {this.data[0].innerData = [] // 因为我每次用的相同假数据，所以此处需要先清空。this.data[0].innerData.push({key: 11,name: '小白',sex: '女',age: '8',hobby: '看电影',}, {key: 12,name: '小黑',sex: '男',age: '36',hobby: '跑步',})} else if (record.key === 1) {this.data[1].innerData = [] // 因为我每次用的相同假数据，所以此处需要先清空。this.data[1].innerData.push({key: 21,name: '小刚',sex: '男',age: '28',hobby: '运动',}, {key: 22,name: '小白',sex: '女',age: '8',hobby: '看电影',})} else {this.data[2].innerData = [] // 因为我每次用的相同假数据，所以此处需要先清空。this.data[2].innerData.push({key: 31,name: '花花',sex: '男',age: '48',hobby: '收拾',}, {key: 32,name: '哦哦',sex: '男',age: '12',hobby: '吃饭',})}}console.log(this.data);console.log('加载子表格');},/** 功能：添加主表格一行*/add() {let i = this.data.length // 保证key唯一this.data.push({key: i,name: `第${i + 1 }行`,sex: `女${i + 1 }`,age: '12',hobby: '吃饭',innerData: []})},/** 功能：添加子表格一行* 参数：row：点击行的信息*/addInnderData(row) {// 只有当这一行展开时，点击添加子表格才会有数据。if (this.expandedRowKeys.includes(row.key)) {let i = row.key * 10 + row.innerData.length + 1this.data.forEach(item => {if (item.key === row.key) {item.innerData.push({key: i,name: '哦哦',sex: '男',age: '12',hobby: '吃饭',})}})}}}};</script>
