elmentUI el-table表格设置某一列的背景色

最新推荐文章于 2025-04-16 11:16:29 发布

爱吃烧鸭蛋的叶安

最新推荐文章于 2025-04-16 11:16:29 发布

阅读量5.6k

点赞数 2

分类专栏： element 文章标签： vue

本文链接：https://blog.youkuaiyun.com/c_qianxia5040/article/details/120727921

版权

element 专栏收录该内容

31 篇文章

订阅专栏

效果如图
在这里插入图片描述

<el-table stripe :data="tableData" :cell-style="columnStyle" height="150">
          <el-table-column label="#" align="center" type="index" width="70"/>
          <el-table-column label="楼层" align="center" prop="floor" />
          <el-table-column label="西热水表" align="center" prop="eastId" />
          <el-table-column label="西中热水表" align="center" width="120" prop="eastZUsage" />
          <el-table-column label="西用水量/m³" align="center" width="100" prop="eastUsage" />
          <el-table-column label="东热水表" align="center" prop="westId" />
          <el-table-column label="东中热水表" align="center" width="120"  prop="westZId" />
          <el-table-column label="东用水量/m³" align="center" width="100" prop="westUsage" />
       </el-table>

methods: {
	    columnStyle({ row, column, rowIndex, columnIndex }) {
	           if (columnIndex == 4 || columnIndex == 7) {  
	            return 'background:	#FFF8DC;'
	  		  	}
	   	 },
   }