
image.png
1、结构
<el-table
v-loading="loading"
:data="tableList"
height="100%"
:header-cell-style="cellStyle"
border
>
<el-table-column
type="index"
label="序号"
width="55"
align="center"
/>
<el-table-column
label="测试1"
align="center"
min-width="140"
prop="ceshi1"
:show-overflow-tooltip="true"
/>
<el-table-column label="表1" align="center">
<el-table-column
align="center"
label="测试2"
min-width="140"
header-align="center"
prop="ceshi2"
:show-overflow-tooltip="true"
/>
<el-table-column
align="center"
label="测试3"
min-width="140"
header-align="center"
prop="ceshi3"
:show-overflow-tooltip="true"
/>
<el-table-column
label="测试4"
align="center"
min-width="140"
prop="ceshi4"
:show-overflow-tooltip="true"
/>
<el-table-column
label="测试5"
align="center"
min-width="140"
prop="ceshi5"
:show-overflow-tooltip="true"
/>
<el-table-column
label="测试6"
align="center"
min-width="140"
prop="ceshi6"
:show-overflow-tooltip="true"
/>
</el-table-column>
<el-table-column label="表2" align="center">
<el-table-column
label="测试7"
align="center"
min-width="140"
prop="ceshi7"
:show-overflow-tooltip="true"
/>
<el-table-column
label="测试8"
align="center"
min-width="140"
prop="ceshi8"
:show-overflow-tooltip="true"
/>
<el-table-column
label="测试9"
align="center"
min-width="140"
prop="ceshi9"
:show-overflow-tooltip="true"
/>
<el-table-column
label="测试10"
min-width="140"
align="center"
prop="ceshi10"
:show-overflow-tooltip="true"
/>
<el-table-column
label="测试11"
align="center"
min-width="140"
prop="ceshi11"
:show-overflow-tooltip="true"
/>
</el-table-column>
</el-table>
2、js
cellStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex == 0 && columnIndex == 1) {
} else if (rowIndex == 0 && columnIndex == 2) {
return "background:#7B68EE;";
} else if (rowIndex == 0 && columnIndex == 3) {
return "background:#66CDAA;";
} else if (rowIndex == 1 && columnIndex < 5) {
return "background:#7B68EE;";
} else if (rowIndex == 1 && columnIndex >= 5 && columnIndex < 10) {
return "background:#66CDAA;";
}
},
网友评论