**

elementUI中table表格对于每一列数据的处理

**

在vue中,我所采用的组件为elementUI
具体详情可参考官网 https://element.eleme.cn/#/zh-CN/component/tag

后端码农一枚,因公司有需求所以暂时顶替写页面。废话不多说,直接上情景:
公司有业务需要查询数据,需要在table表格中对某一列的数据做处理:
后端接口返回的基本数据格式为一个下列对象的数组:
obj:{
aaa:123,
bbb:456,
ccc:789,

xxx:[
ddd:yyyy:MM:dd HH:mm:ss 回到家中
eee:…
]
}

elementUI官方文档中提供了表格的处理方式:每一列的中prop属性决定,可以自动的将拿到的数据数组遍历并呈现出来,

如图所示:
prop决定每个列的属性

但是在上述所示的obj对象中,有一个键值对以数组类型存在的
在初期的表格搭建中发现了,如果不对那一列做处理的话,
展示出来就是这样的:

|——————————————————— |
| 1900:12:01 12:12:12 ****,1900:01:02 1 |
| 2:12:12 ****, … |
|——————————————————— |

找不到图啦,给大家粗略的画一下- -

这样肯定是不对的!
前后尝试遍历每一个xxx数组中的元素加换行符来实现换行,发现加上了
:formatter=“xxxMethod”
还是不行
最后找来找去

最终把处理方式改动成为了,在那一格中插入html

在这里插入图片描述

formatterColumn(cellValue) {
let value = cellValue.join( ‘
’ )
console.log(value)
return value
}

join里面加的是换行符

这样一来就可以正常显示,每一条都换行实现换行的效果

在以下链接中得到的启发:

https://blog.csdn.net/greekmrzzj/article/details/79476752

感谢大哥,头一次分享自己的经历,不喜勿喷出门右上角

Logo

前往低代码交流专区

更多推荐