原

element ui table 表格行颜色自定义,单元格颜色自定义。背景颜色自定义。风格自定义

224人阅读 2024/9/24 11:34 总访问：700951 评论：0 收藏：0 手机

分类: 前端

[TOC]

## 实现效果一

### 效果图

<img src="https://img.tnblog.net/arcimg/notebook/0815be17883f487f82f2db089eed6748.png" style="width:520px;height:auto;">


### 代码如下

#### template:
```
<template>
  <div class="emergencyEvents-container">
	  <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :row-style="rowStyle">
		  <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>
  </div>
</template>
```
#### ts:
```
<script>
export default {
  // 组件名字
  name: "emergencyEvents",
  // 组件参数
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      headerCellStyle: {
        background: "rgba(29, 123, 189, 0.7)",
        height: "39px",
        color: "#fff",
        // border: '1px solid tan',
        // 注意如果想要降低表头高度，需要设置一下padding，不然它默认的padding有点大，你高度设置得在小它也有一定的高度
        paddingTop: "0px",
        paddingBottom: "0px",
      },
      rowStyle: {
        color: "#fff",
        height: "39px",
        // 改版之后的皮肤表格行颜色
        background: "rgba(8, 65, 120, 0.4)",
        marginBottom: "10px",
        opacity: "0.8",
        paddingTop: "10px",
        paddingBottom: "10px",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  // 组件方法
  methods: {
  },
};
</script>
```
#### 样式：
```


<style scoped lang="scss">

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

// 设置行间距
::v-deep .el-table__body {
  border-collapse: separate !important;
  border-spacing: 0px 3px !important;
}


::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 0;
}

// element ui table 鼠标移动高亮颜色
::v-deep .el-table tbody tr:hover>td {
  background: #23aaaC !important
}


// 这句代码加了鼠标指上去变色就显示不出来
// ::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
//     background-color: transparent !important;
// }

::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}

::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

/* element ui 表格 排序 小三角颜色 */
// ::v-deep.el-table .sort-caret.descending{
//   border-top-color:#fff;
// }
// ::v-deep.el-table .sort-caret.ascending{
//   border-bottom-color:#fff;
// }

// ::v-deep .descending .sort-caret.descending{
//   border-top-color:#3958FE;
// }
// ::v-deep .ascending  .sort-caret.ascending{
//   border-bottom-color:#3958FE;
// }


// ----------修改elementui表格的滚动条样式。element ui 表格滚动条隐藏 https://www.cnblogs.com/zhuyuesen/p/16175140.html -----------
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }

  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

</style>
```

还可以根据方法来，在不同条件下的样式改变等，参考：https://www.tnblog.net/aojiancc2/article/details/8111


## 实现效果二

### 效果图二

主要看这个表格效果就好了：

<img src="https://img.tnblog.net/arcimg/notebook/9c710f1daed449d0a7a945df6a4cca8d.png" style="width:620px;height:auto;">

### 整体代码如下
```
<template>
  <div class="emergencyEvents-container">
    组件模板
    <div class="ee-ct-content">
      <div class="event-collapse">
        <div class="event-collapse-item">
          <div class="event-cit-header">
            <div class="event-citt-title">王林森重点关注问题4个</div>
            <div class="event-citt-img">图标</div>
          </div>
          <div class="event-cit-content">
            <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :row-style="rowStyle">
              <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名字
  name: "emergencyEvents",
  // 组件参数
  props: {
    percentage: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      headerCellStyle: {
        background: "#032352",
        height: "39px",
        color: "#fff",
        opacity: "0.9",
        // 表头下方的线
        borderBottom: '1px solid #084178',
        // 注意如果想要降低表头高度，需要设置一下padding，不然它默认的padding有点大，你高度设置得在小它也有一定的高度
        paddingTop: "0px",
        paddingBottom: "0px",
      },
      rowStyle: {
        color: "#fff",
        height: "39px",
        // 改版之后的皮肤表格行颜色
        background: "#032352",
        //marginBottom: "10px",
        opacity: "0.8",
        // paddingTop: "10px",
        // paddingBottom: "10px",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {},
  // 组件方法
  methods: {
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.emergencyEvents-container {
  .ee-ct-content {
    margin-top: 20px;
    border: 1px solid #0e466c;
    border-radius: 4px;
    background: rgba(0, 150, 255, 0.15);

    padding: 20px 20px 20px 20px;
  }
}

.event-collapse {
  .event-collapse-item {
    border-left: 4px solid #FF473E;;

    .event-cit-header {
      display: flex;
      justify-content: space-between;
      padding: 0px 20px 0px 20px;

      background: rgba(8, 65, 120, 0.4);
      height: 32px;
      line-height: 32px;

      .event-citt-title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 15px;
        color: #ff473e;
      }
    }

    .event-cit-content {
      padding: 0px 20px 0px 20px;
      background: #032352;
    }
  }
}
</style>


<style scoped lang="scss">

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

// 设置行间距
::v-deep .el-table__body {
  border-collapse: separate !important;
  // 不要行间距设置成0,0就行了。   
  border-spacing: 0px 0px !important;
}


::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 0;
}

// element ui table 鼠标移动高亮颜色
::v-deep .el-table tbody tr:hover>td {
  background: #23aaaC !important
}


// 这句代码加了鼠标指上去变色就显示不出来,如果不要指上去的背景颜色可以加上这句样式
::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
    background-color: transparent !important;
}

::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}

::v-deep .el-table {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

/* element ui 表格 排序 小三角颜色 */
// ::v-deep.el-table .sort-caret.descending{
//   border-top-color:#fff;
// }
// ::v-deep.el-table .sort-caret.ascending{
//   border-bottom-color:#fff;
// }

// ::v-deep .descending .sort-caret.descending{
//   border-top-color:#3958FE;
// }
// ::v-deep .ascending  .sort-caret.ascending{
//   border-bottom-color:#3958FE;
// }


// ----------修改elementui表格的滚动条样式。element ui 表格滚动条隐藏 https://www.cnblogs.com/zhuyuesen/p/16175140.html -----------
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }

  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

</style>
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 6篇

ORM 16篇

前端 61篇

随笔 14篇

移动开发 6篇

数据库 7篇

英语 3篇

rabbitmq 1篇

.net core 6篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

element ui table 表格行颜色自定义,单元格颜色自定义。背景颜色自定义。风格自定义

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}