<el-table :data="data.tableData" v-loading="loading" :header-cell-
style="table_header_style" :cell-style="table_style" stripe class="parentTable"
style="width: 100%; margin-top:15px;min-height: 54vh;" :scrollbar-always-on="true"
:default-expand-all="true" highlight-current-row height="60vh">
<el-table-column type="expand">
<template #default="scope">
<el-table :data="scope.row.services" :header-cell-style="table_header_style" :cell-
style="table_style" style="width: 100%; margin-top:15px ;":show-header="false"
class="childTable" :span-method="spanMethod">
</el-table>
</template>
</el-table-column>
</el-table>
async function getlist() {
loading.value = true
let _data = {
pageSize: page.pageSize,
pageNum: page.pageNum,
...searchData
}
let res = await getOrderList(_data)
if (res.code == 0) {
let detailsList = []
data.tableData = res.result.list
data.tableData.forEach(o => {
o.services.forEach(child => {
detailsList.push(child)
});
});
getSpanData(detailsList)
page.total = res.total
loading.value = false
}
}
function getSpanData(_data) {
// 存放计算好的合并单元格的规则
data.spanData = []
for (var i = 0, len = _data.length; i < len; i++) {
if (i === 0) {
data.spanData.push(1)
data.pos = 0
} else { // 判断当前元素与上一个元素是否相同
if (_data[i].contractId === _data[i - 1].contractId) {
data.spanData[data.pos] += 1
data.spanData.push(0)
} else {
data.spanData.push(1)
data.pos = i
}
}
}
}
function spanMethod({ row, column, rowIndex, columnIndex }) {
let _row = null
let _col = null
if (column.label === '操作') {
_row = data.spanData[rowIndex]
_col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
el-table嵌套 合同操作项内容
最新推荐文章于 2024-08-18 15:15:05 发布