antV+vue3 a-table组件中将返回的数据组合显示,并进行换行显示
1.需求
本来觉得,两个字段拼接,简单加一个\n
就可以了,但是也分情况,今天遇到了,在此记录一下。
2.问题解决
table中有两个地方需要换行,一个结果记录,一个修正参数,修正参数直接加上\n
就可以,结果记录使用\n
并无法实现想要的效果。
经过多次查询并测试后,发现了当前这种解法。
//结果记录
if (item.result && item.picName) {
item.results = item.result + ` \r\n ` + item.picName
} else if (item.result) {
item.results = item.result
} else if (item.picName) {
item.results = item.picName
} else {
item.results = null
}
//修正参数
if (item.raValue && item.rkValue) {
item.correctedParameter = 'Ra(' + item.raValue + ')' + '\n' + 'Rk(' + item.rkValue + ')'
} else if (item.raValue) {
item.correctedParameter = 'Ra(' + item.raValue + ')'
} else if (item.rkValue) {
item.correctedParameter = 'Rk(' + item.rkValue + ')'
} else {
item.correctedParameter = null
}
并在a-table中修改样式
<a-table
style="white-space: pre-wrap"
ref="table"
:columns="columns"
:dataSource="tableData"
:pagination="false"
defaultPageSize="100"
:alert="false"
:row-key="(record) => record.id"
bordered
>
</a-table>
结果记录添加\r\n
,修正参数直接添加\n
,曾尝试过\t
,\n
,<br/>
,以及二进制/\\n/g
,但是都无法解决。