image.png
- vue视图html,关键changeCellStyle
<!-- 表格 -->
<div class="hoursTable" >
<el-table
:data="hoursTableData"
:cell-style="changeCellStyle"
style="width: 100%">
<el-table-column
prop="date"
label="关键词"
header-align="left"
width="130px"
>
<template slot-scope="scope">
<span><i></i>item-{{scope.$index}}</span>
</template>
</el-table-column>
<el-table-column label="排名" align="center">
<el-table-column
prop="province"
label="省份"
align="center"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
align="center"
>
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
align="center"
>
</el-table-column>
</el-table-column>
</el-table>
</div>
- 样式-css
.hoursTable{
/deep/ .el-table thead.is-group th.el-table__cell{
background: none;
}
/deep/ .el-table thead.is-group tr:nth-child(1)>th:nth-child(1).el-table__cell{
background:#F6F6F6;
text-align: center;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #787878;
}
/deep/ .el-table td:nth-child(1).el-table__cell{
background:#F6F6F6;
padding: 15px 5px;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #787878;
i{
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: #3481FD;
margin-right: 5px;
}
}
}
- js，写再methods: {}里面
changeCellStyle(row) {
if (row.columnIndex===0) {
let footerDom=document.querySelectorAll(`.${row.column.id} i`)
if (footerDom && footerDom.length) {
for (const n of footerDom) {
n.style.background = "rgb(" + Math.round(Math.random() * 235) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')'
}
}
}
},
