快捷導(dǎo)航

element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài)的示例代碼

更新時(shí)間：2023年12月25日 16:02:57 作者：LXXgalaxy

這篇文章主要介紹了element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài),代碼部分分為dom部分和data部分及css部分,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

element-table表格中插入顏色塊顯示數(shù)據(jù)狀態(tài)

dom部分：

 <el-table-column  label="是否異常">
        <template slot-scope="scope">
          <div class="dcs_sf_red" v-if="scope.row.sfyc == 0"></div>
          <div class="dcs_sf_green" v-if="scope.row.sfyc == 1"></div>
        </template>
      </el-table-column>

data部分：

data [
        {
          date: '00:00',
          mode: '固定模式',
          jhz: 120,
          sfyc: 0,
          sjz: 120,
          sfxy: 1,
          fkz: 110,
          cgfs: 1,
        }]

css部分

.dcs_sf_red{
  margin-left: 30%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FE685D;
}
.dcs_sf_green{
  margin-left: 30%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #5DFE96;
}

element-plus的表格固定列不變顏色的解決辦法

前言:有的行需要變顏色所以我們用到了row-class-name方法但是固定列沒有變顏色

<el-table :row-class-name="tableRowClassName">xxx</el-table>
const tableRowClassName = (value) => {
  if (JSON.stringify(row.stopApplyType) != 'null') {
    console.log('停發(fā)')
    return 'error-row'
  } else {
    return ''
  }
}
<style>
.el-table .error-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}
</style>

在這里插入圖片描述

這樣是非常不美觀的所以我看了一下固定列的css 綁定的class
然后我們在app.vue加入以下代碼
.el-table-fixed-column–left 是針對固定在左側(cè)的固定列
.el-table-fixed-column–right 是針對固定在右側(cè)的固定列

//紅色的
.el-table .error-row {
  --el-table-tr-bg-color: var(--el-color-error-light-9);
}
.el-table .error-row .el-table-fixed-column--left {
  background-color: #fef0f0;
}
.el-table .error-row .el-table-fixed-column--right {
  background-color: #fef0f0;
}

在這里插入圖片描述