标签：count el name 样式 标签 table row

问题描述与需求

最后两行的占比统计数据需要加入底色进行凸显

根据官方文档提供的解决方法，给el-table加上row-class-name后未生效

 

 

 

 

 

问题记录

1. 尝试给css加上!important提高优先级，依旧未生效

2. 检查元素发现标签确实加上了count-row的样式

 

 

<!--表格-->
    <el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%" :row-style="{height: '38px'}" :cell-style="{padding: '0'}" :row-class-name="tableRowClassName" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="id">
      <el-table-column min-width="12%" prop="type" label="分类名称" align="center"></el-table-column>
      <el-table-column min-width="10%" prop="unitName" label="单位名称" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="january" label="1月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="february" label="2月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="march" label="3月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="april" label="4月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="may" label="5月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="june" label="6月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="july" label="7月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="august" label="8月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="september" label="9月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="october" label="10月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="november" label="11月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="december" label="12月" align="center"></el-table-column>
      <el-table-column min-width="6%" prop="province" label="合计(吨)" align="center"></el-table-column>
    </el-table>

// 统计行染色
    tableRowClassName ({ row, rowIndex }) {
      if (row.type === 'percent') {
        console.log(row, rowIndex)
        return 'count-row'
      }
      return ''
    },

<style scoped>
  .el-table .count-row {
    background: #F8F8F8 !important;
  }
</style>

 

问题解决

去掉样式标签的scoped使样式变为全局样式，问题解决

<style>
  .el-table .count-row {
    background: #F8F8F8;
  }
</style>

 

标签：count,el,name,样式,标签,table,row
来源： https://www.cnblogs.com/xailichuqiyu/p/16399561.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。