欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

圖文詳解Element-UI中自定義修改el-table樣式

 更新時(shí)間：2022年08月26日 11:06:58   作者：水香木魚  
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁面顯示可能就會(huì)顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時(shí)候,會(huì)顯得整個(gè)頁面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下

前言

我們?cè)谑褂胑lement UI庫的時(shí)候，確實(shí)給我們帶來了許多便利，但是，往往組件庫無法滿足我們的業(yè)務(wù)需求，這時(shí)就需要我們?cè)诮M件庫的基礎(chǔ)上修改樣式。

今天一篇圖解文章教大家如何在組件庫的基礎(chǔ)上去修改樣式，今天我們以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、修改鼠標(biāo)選中行的background-color

<style lang="less" scoped>
//修改鼠標(biāo)選中行
::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;  //默認(rèn)上下是padding12px
}
</style>

12、修改整個(gè)表格的水平和垂直滾動(dòng)條

<style lang="less" scoped>
//水平和垂直滾動(dòng)條
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
</style>

總結(jié)

到此這篇關(guān)于Element-UI中自定義修改el-table樣式的文章就介紹到這了,更多相關(guān)自定義修改el-table樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue生成pdf文件步驟及pdf分頁隔斷處理方法

    vue生成pdf文件步驟及pdf分頁隔斷處理方法

    最近遇到一個(gè)需求,需要把內(nèi)容下載生成pdf文件,但轉(zhuǎn)換過程中內(nèi)容總是會(huì)被截?cái)?就很難受,從網(wǎng)上找到了解決辦法分享給大家,這篇文章主要給大家介紹了關(guān)于vue生成pdf文件步驟及pdf分頁隔斷處理的相關(guān)資料,需要的朋友可以參考下
    2024-02-02
  • 解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問題

    解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問題

    這篇文章主要介紹了解決vue項(xiàng)目打包后提示圖片文件路徑錯(cuò)誤的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2018-07-07
  • vue3.0實(shí)現(xiàn)下拉菜單的封裝

    vue3.0實(shí)現(xiàn)下拉菜單的封裝

    這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue-router 路由傳參用法實(shí)例分析

    vue-router 路由傳參用法實(shí)例分析

    這篇文章主要介紹了vue-router 路由傳參用法,結(jié)合實(shí)例形式分析了vue-router 路由傳參基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-03-03
  • 一文徹底搞懂Vue的MVVM響應(yīng)式原理

    一文徹底搞懂Vue的MVVM響應(yīng)式原理

    這篇文章主要介紹了一文徹底搞懂Vue的MVVM響應(yīng)式原理，vue則是采用發(fā)布者-訂閱者模式，通過Object.defineProperty()來劫持各個(gè)屬性的getter和setter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)
    2022-06-06
  • Vue中使用js-cookie詳情

    Vue中使用js-cookie詳情

    這篇文章主要介紹了Vue中使用js-cookie詳情，文章圍繞js-cookie的相關(guān)資料展開詳細(xì)內(nèi)容具有一定的的參考價(jià)值，需要的小伙伴可以參考一下
    2022-03-03
  • Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題

    Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題

    這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • vite項(xiàng)目如何從0開始配置eslint

    vite項(xiàng)目如何從0開始配置eslint

    這篇文章主要介紹了vite項(xiàng)目如何從0開始配置eslint問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟

    使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟

    createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個(gè)應(yīng)用實(shí)例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過 createApp 方法,我們從 Vue 3 的基本初始化開始,擴(kuò)展到插件的應(yīng)用、多個(gè)應(yīng)用實(shí)例的創(chuàng)建等,需要的朋友可以參考下
    2024-05-05
  • vue設(shè)置代理不起作用問題及解決

    vue設(shè)置代理不起作用問題及解決

    這篇文章主要介紹了vue設(shè)置代理不起作用問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-05-05

最新評(píng)論