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

电脑版发表于：2024/9/24 11:34

[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>
```

TeachingNote

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

{{item.title}}