el-table修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色

修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色

代码如下：

vbnet 复制代码

<div class="c1">
            <el-table
              :data="tableData"
              stripe
               row-class-name="custom-table-row"
              style="width:100%"
              @cell-mouse-enter="lightFn"
              @cell-mouse-leave="(checkName = ''), setAllChart()"
            >
              <!-- // nowInfoNum 舆情事件量 eventSum 舆情传播量spreadSum 舆情办结率 转办时效 -->

              <el-table-column type="index" label="排序" align="center">
              </el-table-column>
              <el-table-column
                prop="addressName"
                label="所属地域"
                width="80"
                align="center"
              >
              </el-table-column>
              <!-- el-table_1_column_3 is-center  el-table__cell -->
              <!-- el-table_1_column_3 is-center  el-table__cell -->
              <el-table-column
                prop="nowInfoNum"

                :label="
                  this.typeName == '转办时效'
                    ? '转办时效(小时)'
                    : this.typeName.replace(new RegExp('舆情', 'g'), '')
                "
                align="center"
              >
              </el-table-column>
              <el-table-column
                v-if="this.typeName != '舆情事件量'"
                prop="eventSum"
                label="事件量"
                align="center"
              >
              </el-table-column>
              <el-table-column
                v-if="this.typeName != '舆情传播量'"
                prop="spreadSum"
                label="传播量"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="waitSum" label="待激活" align="center">
              </el-table-column>
              <el-table-column prop="waitFillSum" label="待核实" align="center">
              </el-table-column>
              <el-table-column prop="doFillSum" label="已核实" align="center">
              </el-table-column>
              <el-table-column
                prop="applySum"
                label="办结申请"
                width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="finishSum" label="已办结" align="center">
              </el-table-column>
              <el-table-column
                prop="finishRate"
                label="办结率"
                v-if="this.typeName != '舆情办结率'"
                align="center"
              >
              </el-table-column>
              <el-table-column
                v-if="this.typeName != '转办时效'"
                prop="transferHour"
                label="转办时效(小时)"
                width="80"
                align="center"
              >
              </el-table-column>
           
            </el-table>
          </div>

el-table设置属性自定义名字 row-class-name="custom-table-row"或直接浏览器属性审查拿到原始名

Go 复制代码

<style scoped>
//修改指定列字体颜色
.c1 >>> .el-table_1_column_3 {
  color: #fd5702;
}
//覆盖划过行的高亮显示
.c1 >>> .custom-table-row:hover .cell{
  color: var(--border) !important ;

}
</style>

后续跟进

我碰到了表格里的类名一直不停变的情况

修改为下方这种稳定写法

Go 复制代码

      this.$nextTick(function(){
const elPart=document.querySelectorAll('tr');
elPart.forEach(a=>{
  a.children[2].style.color='#fd5702';
})
     
      })

本次开发中遇到的有意思的文章