vue看板表格top3样式

最新推荐文章于 2024-07-10 13:59:17 发布

33455432

最新推荐文章于 2024-07-10 13:59:17 发布

阅读量203

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_38999134/article/details/133317919

版权

 <el-table
      :data="tableData"
      class="topTable electricalDevArr mt-10"
  >
      <!-- <el-table-column prop="id" label="排名" width="50" /> -->
      <el-table-column
          label="排名"
          width="50">
          <template slot-scope="scope">
              <!-- {{  scope.$index+1}} -->
              <div v-if=" scope.$index+1<4"> </div>
              <div v-else>{{  scope.$index+1}}</div>
          </template>
          </el-table-column>
      <el-table-column prop="mingcheng" label="设备名称" width="70" />
      <el-table-column prop="shichang" sortable label="运行时长(h)"  width="70" />
      <el-table-column prop="shuliang"  sortable label="报警数量(条)"  width="80" />
  </el-table>

tableData:[
                {
                    "mingcheng": "1#气调库",
                    "shichang": 682,
                    "shuliang": 32,
                },
                {
                    "mingcheng": "#4冷凝器",
                    "shichang": 423,
                    "shuliang": 12,
                },
                {
                    "mingcheng": "10#保鲜库",
                    "shichang": 411,
                    "shuliang": 27,
                },
                {
                    "mingcheng": "3#气调库",
                    "shichang": 324,
                    "shuliang": 25,
                },
                {
                    "mingcheng": "#1冲霜水泵",
                    "shichang": 241,
                    "shuliang": 8,
                },
                {
                    "mingcheng": "4#保鲜库",
                    "shichang": 124,
                    "shuliang": 11,
                },
                {
                    "mingcheng": "3#气调库",
                    "shichang": 89,
                    "shuliang": 29,
                },
                {
                    "mingcheng": "5#气调库",
                    "shichang": 76,
                    "shuliang": 27,
                },

            ],

.topTable.el-table::before {
        height: 0;
    }
    .topTable {
        background: transparent!important;
    }
    .topTable  tr {
        background-color: transparent!important;
    }
    .topTable  .el-table__body tr:hover>td.el-table__cell {
        background-color: transparent!important;
    }
    .topTable  td.el-table__cell {
        border: 0;
        color: #ffffff;
        text-align: center;
    }
    .topTable  .el-table__body tr:nth-child(1) {
        background-image: url('../../assets/shangxueyuan/top1.png');
        background-size: 100% 100%;
        background-origin: center;
        background-repeat: no-repeat;
    }
    .topTable  .el-table__body tr:nth-child(2) {
        background-image: url('../../assets/shangxueyuan/top2.png');
        background-size: 100% 100%;
        background-origin: center;
        background-repeat: no-repeat;
    }
    .topTable  .el-table__body tr:nth-child(3) {
        background-image: url('../../assets/shangxueyuan/top3.png');
        background-size: 100% 100%;
        background-origin: center;
        background-repeat: no-repeat;
    }
    .topTable  th.is-leaf {
        border: 0;
        color: #17CAF0;
        text-align: center;
        background-color: #0D387B!important;
    }
    .topTable  .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar {
        width: 8px;
        height: 8px; 
    }
    .topTable  .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-thumb {
        width: 6px;
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px #8398BC;
        background: rgba(0,0,0,0.2);
    }
    .topTable  .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-track {
        width: 2px;
        -webkit-box-shadow: inset 0 0 5px #8398BC;
        border-radius: 0;
        background: #07317D;
    }
    .topTable  .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-corner {
        width: 0;
        height: 0;
    }