el-table设置边框颜色
el-table设置边框颜色
·
需求的边框颜色是透明的
1.设置表头的边框颜色
在el-table标签分别绑定两函数
:cell-style="tableCellStyle"
:header-cell-style="tableHeaderCellStyle"
<el-table
v-if="tableData.length !== 0"
:cell-style="tableCellStyle"
:header-cell-style="tableHeaderCellStyle"
:data="tableData"
style="width: 100%;"
>
<el-table-column prop="name" label="规则名称" />
<el-table-column prop="example" label="示例" />
<el-table-column prop="remark" label="备注">
<template slot-scope="scope">
<div class="remark">{{ scope.row.remark }}</div>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<div class="operation" @click="toRuleDetails(scope.row)">
<img class="eyeIcon" src="@/static/icons/eye.png" alt="">
<span>查看</span>
</div>
</template>
</el-table-column>
</el-table>
2.在methods写绑定的两方法
// 修改 table cell边框的背景色
tableCellStyle() {
return 'border-color: transparent;'
},
// 修改 table header cell的背景色
tableHeaderCellStyle() {
return 'border-color: transparent;'
},
3.在style中设置el-table下边框颜色
/* 表格下边框颜色 */
.el-table--border::after,
.el-table--group::after,
.el-table::before {
background-color: transparent;
}
4.效果如下
更多推荐
已为社区贡献2条内容
所有评论(0)