在这里插入图片描述

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.效果显示

在这里插入图片描述

GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐