先来看下实现效果
直接上代码
<template>
<div class="table_c">
<div class="table_all">
<el-card shadow="hover" class="tebale_card">
<el-table :data="tableData" border style="width: 100%;" :row-style="getRowClass" :header-row-style="getRowClass" :header-cell-style="getRowClass">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: "TableC",
data() {
return {
tableData: [
{
date: "测试",
name: "测试",
address: "测试"
},
{
date: "测试",
name: "测试",
address: "测试"
},
{
date: "测试",
name: "测试",
address: "测试"
},
{
date: "测试",
name: "测试",
address: "测试"
}
]
};
},
methods: {
getRowClass({ row, column, rowIndex, columnIndex }) {
return "background:#3f5c6d2c;color:#000;";
},
}
};
</script>
<style scoped>
.table_c {
width: 100%;
height: 500px;
background: url("../../../../assets/images/TestImage/background.jpg") center
center no-repeat;
background-size: 100% auto;
padding: 10px;
}
.tebale_card {
background-color: #3f5c6d2c;
}
.el-table,
.el-table__expanded-cell {
background-color: #3f5c6d2c;
}
</style>
除了打开F12去找类名修改,发现修改不完善,又去看文档,找到了设置单独行的属性,然后修改样式后完成上面效果
这里卿洋
愿喜❤️