el-table的合计行如何自定义单元格内容的样式?-灵析社区

猫界袁隆平

el-table的合计行如何自定义单元格内容的样式? 使用summary-method方法可以自定义合计行的内容,但是我想实现合计行的某一列数据小于0则显示绿色,反之则显示红色,[elementUI](https://link.segmentfault.com/?enc=TTEIWRsTL%2BnpIIqvAaYD%2FQ%3D%3D.0RdTDHvVMsR0PvfF%2F31z7tY9sLA8De8yiROGoAknuuNP2Eko3OGQ6MLwH94VTlM0CUn%2FqavqJJHpGSwsF9Equq4KzjfydkRx9kykNhEs14g%3D)的文档没有给出自定义样式的方法,百度也搜不到,AI也是答非所问 例如![image.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20250121/c04586e6fb9d0d6aaae4486bb2699274.png)

阅读量:327

点赞量:15

问AI
只是设置颜色的话,可以学习"element-plus-table" (https://link.segmentfault.com/?enc=sNFfxN4rCmdURRo1IHwePA%3D%3D.zjhXqygfIXXacJ5B9gINWZ37Lmz7AqBJDHiQeZzpN68bCH7ix9JvzqAEP3zS1RZcsTgRdC%2Ba%2FqRSfD4O0NhRVKyr7f0GukY5P5I8iKfyNzyO1oqxcPO20vUhx4zTi%2F0g%2Bn073ifKh3d5mjXzR2X0Qg%3D%3D)中提到的方法,在summary-method中返回一个VNode,这个相当于设置单元格子元素的内容和样式,并不是直接操作单元格,如果需要操作单元格,需要使用下面代码$nextTick中的方式,使用js原生dom api进行设置 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20250121/a31ec8621124335adcce035adf4e912e.png) sums.forEach((item, index) => { if(parseFloat(item) > 0){ let el = sums[index] = this.$createElement('span', { style: { color: '#f00' } }, [item]) this.$nextTick(() => { el.elm.parentNode.parentNode.style="background:#ff0;" }) } })