需求如标题所示，目前已经写了代码结构如下，现在遇到的问题有两个。
其一：固定住展开的行，使其不随着其他列滚动。
其二：展开的行由于合并了剩余的列，导致宽度为所有列宽的总和，比如有五个列，每个列的宽度为 100 ，则最后展开的行的宽度为 100x5=500,如何让整个展开的行宽度为屏幕的宽度。
```
<template>
<div class="bg-07 w-full oferflow-hidden">
<div class="oferflow-auto">
<table class="w-full">
<thead class="w-full relative">
<tr class="w-full">
<td class="w-150px fixedTd">姓名</td>
<td class="w-150px">性别</td>
<td class="w-90px">年龄</td>
<td class="w-90px">收入</td>
<td class="w-90px">工作</td>
</tr>
</thead>
<tbody class="w-full relative">
<template v-for="(item, index) in tableData" :key="index">
<!-- <TrItem v-model:currentExpIndex="currentExpIndex" :line-data="item" :self-index="index"></TrItem> -->
<tr class="w-full">
<td class="fixedTd">
<div class="w-150px">{{ item.name }}</div>
</td>
<td>
<div class="w-150px">{{ item.age }}</div>
</td>
<td>
<div class="w-90px">{{ item.sex }}</div>
</td>
<td>
<div class="w-90px">{{ item.income }}</div>
</td>
<td>
<div class="w-90px">{{ item.job }}</div>
</td>
</tr>
// 需要展开的行
<tr v-if="currentExpIndex === index" class="w-375px sticky bg-02">
<td colspan="5" class="w-375px expandTr top-0">合并单元格</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import TrItem from './TrItem.vue';
const tableData = [
{
name: '1',
age: '2',
sex: '3',
income: '4',
job: '5'
},
{
name: '3',
age: '5',
sex: '6',
income: '7',
job: '8'
},
{
name: '23',
age: '43',
sex: '43',
income: '43',
job: '54'
},
{
name: '5',
age: '4',
sex: '3',
income: '2',
job: '1'
}
];
let exp = ref(false);
let currentExpIndex = ref(-1);
function expand() {
exp.value = !exp.value;
}
</script>
<style scoped>
.fixedTd {
position: sticky;
top: 0;
left: 0;
background: #fff;
}
.expandTr {
position: sticky;
top: 0px;
left: 0px;
width: 375px;
}
</style>
```
求来个大佬解答 |
|
