遇到一个需求就是在表格里面嵌套一个子表格,然后父表格展开的时候,根据id查询出该表格下的子表格。
刚开始我查antd的文档的时候是参照以下的表格写的
<template>
<a-table :columns="columns" :dataSource="data" class="components-table-demo-nested">
<a slot="operation" slot-scope="text">Publish</a>
<a-table
slot="expandedRowRender"
slot-scope="text"
:columns="innerColumns"
:dataSource="innerData"
:pagination="false"
>
<span slot="status" slot-scope="text"> <a-badge status="success" />Finished </span>
<span slot="operation" slot-scope="text" class="table-operation">
<a>Pause</a>
<a>Stop</a>
<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>
</template>
<script>
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', scopedSlots: { customRender: 'operation' } },
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
const innerColumns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Status', key: 'state', scopedSlots: { customRender: 'status' } },
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
scopedSlots: { customRender: 'operation' },
},
];
const innerData = [];
for (let i = 0; i < 3; ++i) {
innerData.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
export default {
data() {
return {
data,
columns,
innerColumns,
innerData,
};
},
};
</script>
可是我遇到一个问题就是:展开父表格的时候,发送的是同一个请求,没有取到父表格id去获取子表格,然后通过查找资料,发现了父表格拥有一个属性@expand,设置这个属性就可以在展开表格的动作中,带上该父表格的信息。
以下是嵌套表格的代码:
<div>
<a-table
:columns="columns"
rowKey="id"
@expand="expand" //**展开父表格的属性**
size="middle"
:pagination="false"
:expandedRowKeys="expandedRowKeys"
:dataSource="dataSource"
:loading="loading"
>
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
</span>
<a-table
slot="expandedRowRender"
slot-scope="text, record"
bordered
:columns="innerColumns"
:title="onHeaderCell"
:dataSource="innerData"
:pagination="false"
>
<!-- <span slot="addDbUser" slot-scope="text, record">
<a-button @click="addDbUser(record)">新增数据库用户</a-button>
</span>-->
<span slot="innerAction" slot-scope="text, record">
<a @click="deleteDbUser(record)">删除</a>
</span>
</a-table>
</a-table>
</div>
以下是expand的函数:
expand(expanded, record) {
this.isExpend = expanded;
this.expandedRowKeys = []; // 重置展开节点,只展开当前点击的节点(内部数据调用模板,无法做到同时几个内层表格数据直接缓存在页面)
if (expanded) {
this.expandedRowKeys = [record.id];
//**发送获取子表格的请求**
this.loadInnerData(this.expandedRowKeys[0]);
}
console.log(expanded, record);
},