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

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

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

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


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



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才能生效,所以不能放在里面

你可能感兴趣的:(vue.js,elementui,javascript,前端)