html部分
<a-table
:columns=“columns”
:data-source=“dealData”
rowKey=“key”
class=“components-table-demo-nested”
:expandedRowKeys=“expRowKeys”
@expand=“getInnerData”
:pagination=“false”
:scroll=“{ x: 0, y: ‘calc(100vh - 520px)’ }”
>
<template #bodyCell=“{ column, record }”>

<span class=“pointStype” @click=“dealManage(record)”>Manage


<template #expandedRowRender>
<a-table
:columns=“hospitialColumns”
:data-source=“hospitialData”
rowKey=“key”
class=“components-table-demo-nested”
:expandedRowKeys=“expHospitalRowKeys”
@expand=“getInnerAgentData”
:pagination=“false”
>
<template #bodyCell=“{ column, record }”>

<span class=“pointStype” @click=“hospitalManage(record)”>Manage


<template #expandedRowRender>







<a-pagination
size=“small”
v-model=“page”
:total=“total”
:show-total=“(total) => total of ${total}
show-size-changer
show-quick-jumper
@change=“onPageChange”
@showSizeChange=“onSizeChange”
/>

ts代码实现
let expRowKeys: any = ref([]);
let expHospitalRowKeys: any = ref([]);
const getInnerData = (expanded, record) => {
expHospitalRowKeys.value = [];
if (expanded) {
// 只展开一行
if (expRowKeys.value.length > 0) {
//进这个判断说明当前已经有展开的了
//返回某个指定的字符串值在字符串中首次出现的位置,下标为0
let index = expRowKeys.value.indexOf(record.key);
if (index > -1) {
//如果出现则截取这个id,1d到1相当于0,针对重复点击一个
expRowKeys.value.splice(index, 1);
} else {
//如果没出现则截取所有id,添加点击id,0到1,针对已经有一个展开,点另一个会进入判断
expRowKeys.value.splice(0, expRowKeys.value.length);
expRowKeys.value.push(record.key);
}
} else {
//数组长度小于0,说明都没展开,第一次点击,id添加到数组,数组有谁的id谁就展开
expRowKeys.value.push(record.key);
}
hospitialData.length = 0;
hospitialData.push(…record.automationHospitals);
} else {
expRowKeys.value = [];
}
};
//分页
let page = ref(1);
let limit = ref(10);
let total = ref(0);
const onPageChange = (pages, pageSize) => {
page.value = pages;
limit.value = pageSize;
searchList();
};
const onSizeChange = (pages, pageSize) => {
page.value = pages;
limit.value = pageSize;
searchList();
};

Logo

前往低代码交流专区

更多推荐