Bootstrap

antV+vue3 a-table组件中将返回的数据组合显示,并进行换行显示

在这里插入图片描述

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,但是都无法解决。

3.效果显示

在这里插入图片描述

;