el-table给相关行添加背景色（tree数据结构）

︶一颗莎

已于 2023-10-16 09:46:43 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

于 2022-12-19 11:20:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52136609/article/details/128370278

在Vue.js项目中，使用Element UI的el-table组件时，当表格数据为树形结构时，通过row-class-name绑定tableRowClassName来添加行背景色。需要注意，在tree数据结构下，rowIndex不再适用。要使row-class-name、row-style、cell-class-name生效，需使用全局CSS类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

el-table添加row-class-name绑定tableRowClassName

在table数据不是tree数据时，rowIndex拿到的是table行的索引

tableRowClassName({ row,rowIndex }) {
       if (rowIndex % 2 === 0) {
    		return "";
       } else {
			return "rowStyle"
       }
   },


<style lang="less">
.el-table .rowStyle {
  background-color: #F8F8F8;
}
</style>

在table数据是tree数据结构时：

<el-table
          ref="multipleTable"
          :data="classifyData"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'chlidList', hasChildren: 'hasChildren' }"
          tooltip-effect="dark"
          style="width: 100%;"
          @select="select"
          @select-all="selectAll"
          @selection-change="handleSelectionChange"
          :row-class-name="classifyTableRow"
          border
        ></el-table>

rowIndex拿到的是classifyData包含chlidList的索引
解决：对源数据classifyData进行处理，添加index

this.classifyData.forEach((item,index) => {
      item.index = index + 1
      if(item.chlidList && item.chlidList.length > 0) {
            item.chlidList.forEach(i => {
               i.index = index + 1
            })
        }
})

classifyTableRow({ row, rowIndex }) {
      if(row.index % 2 === 0) {
          return ''
        } else {
          return 'rowStyle'
        }
 },

在elementUI中，row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效，所以不能放在里面