antV+vue3 a-table组件中将返回的数据组合显示,并进行换行显示
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)