ElementUI中table表格实现根据不同的cellValue的值渲染不同颜色的值

最新推荐文章于 2024-03-13 09:34:00 发布

原创最新推荐文章于 2024-03-13 09:34:00 发布 · 7.3k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

ElementUI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在ElementUI的table组件中，根据单元格的值(cellValue)动态设置颜色。通过使用`formatter`属性绑定一个格式化函数，处理row和column数据，实现对天数正负值的条件判断。当值小于0时显示为红色字体，大于0则显示为绿色字体。由于`formatter`仅渲染文本，需借助`<span>`标签配合内联样式完成颜色渲染。

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

ElementUI官网关于table的api文档

根据Table-column Attributes这里的描述，如果我们需要将某个单元格的值重新渲染的话，需要使用到formatter属性来绑定一个用于格式化本单元格的函数，在函数中重新的计算并返回需要的值。
Function(row, column, cellValue, index)
该函数接受4个参数：row-行数据 column-列字段属性 cellValue-本格的值 index-索引值

<el-table-column 
	prop="remainDays" 
	align="center" 
	label="距离召开时间剩余天数" 
	:formatter="formateDays">
</el-table-column>
//绑定到一个formatDays的函数上

在methods中定义下列两个函数用于格式化天数

methods:{
	//格式化天数、只格式化文本
	formateDays ( row, column, cellValue, index ) {
		let cell = parseInt(cellValue)
		return cell >= 0 ? cell : '已逾期' + Math.abs( cell ) + '天'
	},
	//格式化天数，html形式，包含颜色
	formateHtml ( row, column, cellValue, index ) {
		let cell = parseInt(cellValue)
		let color = cell >= 0 ? 'green' : 'red'
		let val =  cell >= 0 ? cell : '已逾期' + Math.abs( cellValue ) + '天'
		return ( `<span style="color:${ color }">${ val }</span>`)
	}
}

如果我们将formatter绑定到formateDays发现值小于0的被渲染成逾期xx天，大于0的正常显示数字
如果我们将formatter绑定到formateHtml,本以为可以实现我们预料中的效果，即：小于0的应该是红色字体，大于0的应该是绿色字体，但是结果并不是，它将我们的formatHtml函数的整个return部分都显示在了单元格中
于是得出结论：formatter仅仅是渲染文本，即以text文本形式插入到单元格中，而我们想要的结果是以html形式渲染进去

解决办法：在el-table-column中使用template标签包裹，然后在template下创建一个标签，并使用v-html指令来渲染即可，代码如下

<el-table-column 
	prop="remainDays" 
	align="center" 
	label="距离召开时间剩余天数" 
	>
	<template slot-scope="scope">
		v-html="formateHtml( scope.row.remainDays )"
	</template>
</el-table-column>

methods:{
	//格式化天数，html形式，包含颜色
	formateHtml ( cellValue ) {
		let cell = parseInt(cellValue)
		let color = cell >= 0 ? 'green' : 'red'
		let val =  cell >= 0 ? cell : '已逾期' + Math.abs( cellValue ) + '天'
		return ( `<span style="color:${ color }">${ val }</span>`)
	}
}