一、el-table背景色设置透明
在实际开发中，可能会遇到需要将el-table背景设置为透明的情况。这种情况下可以使用style属性来设置表格样式。例如：
<el-table :data="tableData" style="background-color: transparent">
这里，我们将el-table的背景色设置为透明，这样就可以使得上下文内容穿透表格，最终达到我们想要的效果。
二、el-table设置背景色
除了将el-table的背景色设置为透明，我们还可以直接设置其背景色。如果我们想要使得表格内容更加突出，可以将其背景色设置为深色。
<el-table :data="tableData" style="background-color: #333">
这里我们将背景色设置为#333，即深灰色。
当然，如果我们不想改变el-table整个的背景色，而是需要针对某一个单元格的背景色进行设置，也是可以做到的。在el-table-column标签中，我们可以使用scoped-slot对数据进行自定义渲染。例如：
<el-table-column label="姓名">
<template slot-scope="scope">
<div style="background-color: #f00; color: #fff">{{scope.row.name}}</div>
</template>
</el-table-column>
这里我们将姓名列中的每一个单元格背景色设置为红色。
三、HBuilder颜色背景选取
如果我们不知道该选择怎样的颜色进行配色，可以使用HBuilder X中的颜色选择器来进行选择。例如，在HBuilder X的样式编辑器中，我们可以找到背景色选择器：
.el-table {
/** 背景色 **/
background-color: #1f2d3d;
}
在样式编辑器左侧栏中选择该选择器，右侧就会显示出背景颜色选择器。我们可以随意地拖动色块，调整颜色搭配。一旦我们找到了一个满意的颜色方案，就可以将代码拷贝到对应的位置上。
总之，el-table的背景色我们可以根据实际需求自由地进行设置，通过以上几种方法，可以满足各类场合的需求。
原创文章，作者：WSKQY，如若转载，请注明出处：https://www.506064.com/n/317886.html
微信扫一扫 
支付宝扫一扫 