背景

在实际的表单应用中，我们经常会遇到表单编辑后如何快速显示详情页或者直接打印出来的问题。接下来，我们将在本文中详细讨论它

设计形式

通过可视化表单设计器–表单制作设计表单。这里，我们使用表格布局来设计以下表单

关于如何设计这样的表单，可以去复杂报表设计和语言Que。

显示表单详细信息

当我们需要显示表单的细节时，只需要配置表单组件的参数并使表单能够打印和读取，表单就会将文本框转换成文本类型。设置如下:

<fm-generate-form :data="jsonData" ref="generateForm" :print-read="true" ></fm-generate-form>

只需将print-read属性设置为true，不是很简单吗？

打印表单

打印表单也很简单。我们已经将上面的表单设置为打印和阅读模式，这样文本框就消失了，直接显示文本。我们可以直接调用window.print()来打印页面。

但是，有时候我们的页面上还有其他元素，比如打印按钮，我们不想打印出来。这时候就需要用CSS media query @media print来修改样式，实现在打印设备上的显示效果。

<template> <div> <fm-generate-form :data="jsonData" ref="generateForm" :print-read="true" > </fm-generate-form> <el-button class="print-btn" type="pri***ry" @click="handlePrint">打印</el-button> </div></template><style>@media print{ .print-btn{ display: none; } }</style>

我们来看看最后的效果:

本文来自倾心之夏投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/637014.html