element ui table改变默认样式，去掉边框改变table背景颜色

最新推荐文章于 2024-06-28 14:59:29 发布

江湖行骗老中医

最新推荐文章于 2024-06-28 14:59:29 发布

阅读量2.6k

点赞数 4

分类专栏： # vue 文章标签： vue.js elementui javascript

原文链接：https://blog.csdn.net/qq_28170105/article/details/125010330

版权

vue 专栏收录该内容

121 篇文章 7 订阅

订阅专栏

<template>
  <div class="jg-dw-jr">
   //四个角直角
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="title">
      <i class="fa fa-chevron-right" aria-hidden="true"></i><i class="fa fa-chevron-right icon-right" aria-hidden="true"></i>
      监管单位接入情况</div>
    <div class="jcContMain">
      <el-table
        :data="tableData"
        //改变表头样式必须写
        :header-cell-style="getRowClass"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号" >
        </el-table-column>
        <el-table-column
          prop="cityName"
          label="区域名称" >
        </el-table-column>
        <el-table-column
          prop="flag"
          label="监管单位数量" >
        </el-table-column>
        <el-table-column
          prop="flag"
          label="接入数量">
        </el-table-column>
        <el-table-column
          prop="flag"
          label="接入比例">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      tableData: []
    }
  },
  mounted() {
    //获取城市数据
    this.showCityFun();
  },
  methods: {
    //改变table表头背景和字体颜色
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      return 'background:#03487B;color:#1adafb;'
    },
    showCityFun(){
      this.$api.showCityFun().then((res)=>{
        console.log(res)
        this.tableData = res.data
      })
    }
  }
}
</script>
 
<style lang="scss" scoped>
  //去掉表格/*头部边框*/
::v-deep .el-table thead tr th.is-leaf{
    border: 0px solid #EBEEF5;
    border-right: none;
  }
::v-deep .el-table {
    // 去掉table的border start----------------------------
    border: 0;
    th,tr,td{ border: 0; }
    &::before { height: 0px;}
    &::after {  width: 0;}
    .el-table__fixed:before { height: 0; }
   // 去掉table的border end----------------------------
 }
//整个table的背景颜色
::v-deep .el-table, .el-table__expanded-cell {
    background-color: transparent;
    color: white;
  }
//表格整行的颜色
::v-deep .el-table tr {
  background-color: transparent!important;
}
::v-deep .el-table tbody tr:hover>td {
  background-color: rgba($color: #03487B, $alpha:0.5) !important;
}
::v-deep .el-table–enable-row-transition .el-table__body td, .el-table .cell{
  background-color: transparent;
}
.jg-dw-jr{
  margin-top: 10px;
  background:#062043;
  background-image: url(../image/faguang.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  //四个角边框的样式
  span{ display: block; width: 10px; height: 10px; border-left: 3px solid rgba($color: #A1CBFF, $alpha: 0.6);
      border-bottom: 3px solid rgba($color: #A1CBFF, $alpha: 0.6); position: absolute;
  }
  span:nth-child(1){ bottom:0; left:0; }
  span:nth-child(2){ top:0; left:0; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);}
 
  span:nth-child(3){ top: 0; right:0;-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg);
  }
  span:nth-child(4){  bottom: 0; right:0;-moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);
  }
  .title{
    color: #7999D4;
    font-size: 19px;
    font-weight: 540;
    //箭头图表颜色
    .fa-chevron-right{
      color: #779BD8;
    }
    .icon-right{
      color: #A0C0F6;
      margin:0 5px 0 -3px;
    }
  }
}
.jcContMain{
  margin-top:15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>