前言
我们在使用element UI库的时候，确实给我们带来了许多便利，但是，往往组件库无法满足我们的业务需求，这时就需要我们在组件库的基础上修改样式。
今天一篇图解文章教大家如何在组件库的基础上去修改样式，今天我们以el-table 为例子。👇👇👇
el-table原代码:
<div id="Table">
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
1、修改th(头部)的background-color
<style lang="less" scoped>
// 修改头部背景
::v-deep .el-table th{
background-color: #ADAD;
}
</style>
2、修改表头字体颜色
<style lang="less" scoped>
//修改表头字体颜色
::v-deep.el-table thead {
color: #FC5531;
font-weight: 500;
}
</style>
3、修改tr(行)的background-color
<style lang="less" scoped>
//修改行背景
::v-deep .el-table tr{
background-color: yellow;
}
</style>
4、修改tr(行内线)的background-color
<style lang="less" scoped>
//修改行内线
::v-deep .el-table td,.building-top .el-table th.is-leaf {
border-bottom: 1px solid #007ACC;
}
</style>
5、修改斑马线的background-color(奇偶行背景)
<style lang="less" scoped>
//修改行内线
::v-deep .el-table td,.building-top .el-table th.is-leaf {
border-bottom: 1px solid #007ACC;
}
</style>
6、修改表格最底部background-color和height
<style lang="less" scoped>
// 修改表格最底部颜色和高度
::v-deep .el-table::before {
border-bottom: 1px solid red;
height: 4px;
}
</style>
7、修改表格无数据background-color，字体颜色
<style lang="less" scoped>
// 修改表格无数据背景，字体颜色
::v-deep .el-table__empty-block {
background: #16203c;
}
::v-deep .el-table__empty-text {
color: #ccc;
}
</style>
8、修改鼠标选中行的background-color
<style lang="less" scoped>
//修改鼠标选中行
::v-deep .el-table__body tr.current-row>td {
background: #f57878 ;
}
</style>
以下效果 同上,就不附加效果图了,博友们可自行尝试 🐱🐉
9、修改行内文字居中（除表头）
<style lang="less" scoped>
//修改行内文字居中
::v-deep .el-table td, .el-table th {
text-align: center;
}
</style>
10、修改除表头外的表格内容的背景色
<style lang="less" scoped>
//修改普通行
::v-deep .el-table tr{
background: #091B37;
height:20px;
}
::v-deep .el-table--enable-row-transition .el-table__body td, .el-table .cell{
background-color: #091B37;
}
</style>
11、修改行高
<style lang="less" scoped>
//修改行高
::v-deep .el-table td{
padding:0px 0px; //默认上下是padding12px
}
</style>
12、修改整个表格的水平和垂直滚动条
<style lang="less" scoped>
//水平和垂直滚动条
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
overflow-x: hidden;
}
</style>
总结
到此这篇关于Element-UI中自定义修改el-table样式的文章就介绍到这了,更多相关自定义修改el-table样式内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
