一、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/zh-hant/n/317886.html
微信掃一掃 
支付寶掃一掃 