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

Posted on by

前言

我們在使用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樣式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：