圖文詳解Element-UI中自定義修改el-table樣式
更新時間：2022年08月26日 11:06:58 作者：水香木魚
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁面顯示可能就會顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時候,會顯得整個頁面就不好看,下面這篇文章主要給大家介紹了關于Element-UI中自定義修改el-table樣式的相關資料,需要的朋友可以參考下
前言
我們在使用element UI庫的時候，確實給我們帶來了許多便利，但是，往往組件庫無法滿足我們的業(yè)務需求，這時就需要我們在組件庫的基礎上修改樣式。
今天一篇圖解文章教大家如何在組件庫的基礎上去修改樣式，今天我們以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(行內(nèi)線)的background-color
<style lang="less" scoped>
//修改行內(nèi)線
::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>
//修改行內(nèi)線
::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、修改表格無數(shù)據(jù)background-color，字體顏色
<style lang="less" scoped>
// 修改表格無數(shù)據(jù)背景，字體顏色
::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、修改行內(nèi)文字居中（除表頭）
<style lang="less" scoped>
//修改行內(nèi)文字居中
::v-deep .el-table td, .el-table th {
text-align: center;
}
</style>
10、修改除表頭外的表格內(nèi)容的背景色
<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樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Element-UI中el-table如何合并相同單元格
- element-ui中el-table不顯示數(shù)據(jù)的問題解決
- Element-ui設置el-table表頭全選框隱藏或禁用
- vue element-ui實現(xiàn)el-table表格多選以及回顯方式
- vue element-ui el-table組件自定義合計(summary-method)的坑
- element-ui中如何給el-table的某一行或某一列加樣式
- element-ui如何取消el-table的hover狀態(tài)(取消高亮顯示)
- element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標方式
- Element-UI 解決el-table中圖片懸浮被遮擋問題小結
相關文章
監(jiān)聽屬性可以針對某個屬性進行監(jiān)聽,當監(jiān)聽的屬性的值發(fā)生了變化,則會執(zhí)行相應的函數(shù),下面這篇文章主要給大家介紹了關于Vue監(jiān)聽屬性的相關資料,需要的朋友可以參考下2021-11-11
本文主要介紹了element關于table拖拽排序問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
今天小編就為大家分享一篇Vue2.0 實現(xiàn)頁面緩存和不緩存的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決在vue+webpack開發(fā)中出現(xiàn)兩個或多個菜單公用一個組件問題
這篇文章主要介紹了在vue+webpack實際開發(fā)中出現(xiàn)兩個或多個菜單公用一個組件的解決方案,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue中路由的前進和后退問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了vue多頁面項目實現(xiàn)版本快照功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了關于vuex刷新后數(shù)據(jù)丟失的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了優(yōu)化Vue項目編譯文件大小的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
最近在做一個前端vue.js對接的功能模塊時，需要實現(xiàn)一個下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進行圖片下載，感興趣的可以了解一下2021-06-06