html
<el-table
class="eltables"
stripe
:data="tableData">
<el-table-column
prop="type"
label="处室">
</el-table-column>
<el-table-column
prop="type"
label="项目名称">
</el-table-column>
<el-table-column
prop="num1"
label="预算数">
</el-table-column>
<el-table-column
prop="num2"
label="调整数">
</el-table-column>
<el-table-column
prop="num2"
label="执行数">
</el-table-column>
<el-table-column
prop="num3"
label="执行率">
<template slot-scope="scope">
<span class="bjs">{{ scope.row.num3 }}</span>
</template>
</el-table-column>
</el-table>
css
.eltables {
width: calc(100% - 48px);
margin-left: 24px;
}
::v-deep {
.el-table, .el-table__expanded-cell {
background: none;
}
.el-table th, .el-table tr {
background: none;
font-size: 13px;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background: rgba(9, 124, 184, 0.2);
}
.has-gutter {
background: rgba(39, 124, 246, 0.3);
color: rgba(255, 255, 255, 1);
}
.el-table td, .el-table th.is-leaf {
border: none;
color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background: rgba(9, 124, 184, 0.2);
color: #fff;
}
.el-table td, .el-table th {
padding: 6px 0;
}
.el-table--border::after, .el-table--group::after, .el-table::before {
display: none;
}
}