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

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

<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;'
	  		  	}
	   	 },
   }
Vue.js 是一款流行的前端框架,主要用于构建用户界面。如果你想要在使用 Element UI 的 `el-table` 表格组件时,设置前三行的背景颜色,你可以通过 Vue 的模板绑定和 CSS 来实现。首先,在 `v-bind:class` 或者直接在 HTML 上添加 `class` 标签来动态地应用样式。 例如,假设你想让第一、第二、第三行的背景色分别为红色、蓝色和绿色,可以这样做: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <!-- 添加一个自定义列来显示背景颜色 --> <el-table-column width="100" prop="backgroundColor" label="背景颜色"> <template slot-scope="scope"> <div :style="{ backgroundColor: scope.row.backgroundColor }">{{ scope.row.name }}</div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '一行', backgroundColor: 'red' }, { name: '二行', backgroundColor: 'blue' }, { name: '三行', backgroundColor: 'green' }, ... // 更多数据项 ] }; } }; </script> <style scoped> .el-table tr:nth-child(-n+3) { /* 设置前三行的背景颜色 */ background-color: {{ tableData[0].backgroundColor || '' }}; background-color: repeating-linear-gradient(to right, red, red 5px, transparent 5px); } /* 如果需要覆盖默认样式,可以这样写 */ .el-table tr:nth-child(1) { background-color: red; } .el-table tr:nth-child(2) { background-color: blue; } .el-table tr:nth-child(3) { background-color: green; } </style> ``` 在这个例子中,我们在模板中创建了一个新的列用于显示背景颜色,并使用 `v-bind:class` 或 `:style` 绑定计算属性来动态改变前几行的颜色。在 CSS 中,我们使用了 `nth-child` 伪类来选择前几行并设置相应的背景颜色。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值