<template>
<el-table :data="allData" border ref="table" :cell-style="{ 'text-align': 'center' }" :header-cell-style="{
background: '#5f697d',
color: '#fff',
height: '10px',
'text-align': 'center'
}" stripe :span-method="spanMethod">
<el-table-column prop="orderId" label="订单号">
<template #default="{ row, $index }">
<div @click="showItems($index)">{{ row.orderId }} </div>
</template>
</el-table-column>
<el-table-column label="信息A">
<template #default="{ row }">
<div v-if="row.isVirtual" style="height:100px">
<div style="display: flex;flex-direction: column;">
<el-input v-model="row.inputValue" placeholder="请输入内容" />
<div v-if="row.itemsListShow">hhhhhhhhhhh</div>
</div>
</div>
<div v-else>
{{ row.infoA }}
</div>
</template>
</el-table-column>
<el-table-column label="信息B">
<template #default="{ row }">
<div v-if="row.isVirtual">
</div>
<div v-else>
{{ row.infoB }}
</div>
</template>
</el-table-column>
</el-table>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
// 原始数据
const originalData = [
{ orderId: '1001', infoA: '张三', infoB: '李四', ORDER_PRO: [{ chirldrenId: "11", chirldrenname: "11" }, { chirldrenId: "22", chirldrenname: "22" }] },
{ orderId: '1002', infoA: '王五', infoB: '赵六', ORDER_PRO: [{ chirldrenId: "13", chirldrenname: "13" }] },
{ orderId: '1003', infoA: '钱七', infoB: '孙八', ORDER_PRO: [] },
];
const showItems = (row) => {
console.log(row)
allData.value[row + 1].itemsListShow = !allData.value[row + 1].itemsListShow
}
// 显示数据
const allData = ref();
// 添加虚拟行后的扁平数组
const flattenedData = () => {
const result = [];
originalData.forEach((item) => {
// 正常行
result.push({ ...item, itemsListShow: false });
// 虚拟行:保留订单号,添加输入字段
result.push({
isVirtual: true,
orderId: item.orderId,
inputValue: '',
ORDER_PRO: item.ORDER_PRO,
itemsListShow: false,
});
});
allData.value = result;
};
onMounted(() => {
flattenedData();
});
// 合并方法:
const spanMethod = (params) => {
const { row, rowIndex, columnIndex } = params;
if (columnIndex === 0) { // 对于订单号列
if (rowIndex % 2 === 0) { // 真实数据行
return { rowspan: 2, colspan: 1 }; // 合并两行
} else { // 虚拟行
return { rowspan: 0, colspan: 0 }; // 隐藏该单元格
}
}
if (row.isVirtual && columnIndex === 1) { // 对于虚拟行中的信息A列
return { rowspan: 1, colspan: 2 }; // 合并后两列
}
if (row.isVirtual && columnIndex === 2) { // 对于虚拟行中的信息B列
return { rowspan: 0, colspan: 0 }; // 隐藏该列
}
return { rowspan: 1, colspan: 1 };
};
</script>
效果:三行数据 但是相当于6行数据每一行的第二行是一个虚拟的合并数据