vue开发网站-使用插件element、vant 遇到的问题

1. js把两个字符串放进一个另字符串里,用逗号分隔

let string1 = "Hello";
let string2 = "World";
let result = `${string1},${string2}`;
console.log(result); // 输出: Hello,World

2.js将字符串转为数组

const str = "Hello, world!";
const arr = str.split(", "); // 使用逗号和空格作为分隔符
console.log(arr); // 输出: ["Hello", "world!"]

3.获取文件名的后缀

const fileExtension = file.name.split('.').pop();
console.log('文件后缀:', fileExtension);

4.往数组里push新的数据

出现报错:this.content.page4.push is not a function

解决方法:确认 this.content.page4 是否应该是一个数组。
如果是,确保它在被赋值之前被初始化为一个数组。
如果不是数组,需要将 page4 转换为数组

if (!Array.isArray(this.content.page4)) {this.content.page4 = [this.content.page4];
}
this.content.page4.push(newItem); // 现在应该可以正常调用了

在这里插入图片描述

5.一个固定3行的表格,循环接口返回的内容,当第一次进入 接口内容为空时,表格也为空,就会没有用户填写的入口,此时应该判断一下:默认push3条空数据

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.vue点击按钮调取打印

点击按钮
在这里插入图片描述

调取打印该页面在这里插入图片描述

<div  @click="clickDown()">下载</div>methods: {//下载-调取打印clickDown() {window.print()},
}<style>/* 点击打印的样式 */@media print {.clickDown {display: none;}}
</style>

7.el-radio单选回显,打印预览不显示

el-radio单选回显页面上是这样的:
在这里插入图片描述

打印预览是这样的:
在这里插入图片描述
解决方式:
不是代码的问题,打印预览时,需要在【选项】中选中【背景图形】的。
在这里插入图片描述

8.vue打印预览时,关于页眉页脚

8.1关于页面的页眉页脚,都可以在这里设置:

比较灵活一点,根据自己需求进行选择

在这里插入图片描述

8.2也可以在样式代码里单独设置:

代码设置之后,无论点不点击选项按钮,页眉页脚都会隐藏

/* 打印的样式 */@media print {/*去除页眉页脚*/@page {size: auto;margin: 10px;}html {background-color: #FFFFFF;margin: 0;}body {margin: 10px 15px;} /*去除页眉页脚*/}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/21476.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入探索 Linux 命令之 AWK:文本处理的神兵利器

深入探索 Linux 命令之 AWK&#xff1a;文本处理的神兵利器 在 Linux 系统中&#xff0c;文本处理是日常运维和数据分析中不可或缺的一部分。而 awk 命令&#xff0c;作为 Linux 文本处理三剑客之一&#xff08;另外两个是 sed 和 grep&#xff09;&#xff0c;以其强大的文本…

跨越百亿营收的今世缘,全国化进程仍挑战重重?

当前&#xff0c;白酒市场正在经历一场深度调整&#xff0c;随着存量时代到来&#xff0c;白酒品牌地位的更替和竞争格局的重构已经展开。这一背景下&#xff0c;今世缘等地方性酒企也正在凭借对区域市场的深耕&#xff0c;展现出较快的成长速度&#xff0c;并希望能借此占领市…

搭建一个基于主流技术Spring Boot 2 + Vue 3 + Ant Design Vue的技术框架的简要步骤

搭建一个基于主流技术Spring Boot 2 Vue 3 Ant Design Vue的技术框架涉及前后端分离的开发模式。以下是一个简化的步骤指南&#xff0c;用于帮助你开始这个项目&#xff1a; 1. 后端&#xff08;Spring Boot 2&#xff09; 1.1 初始化项目 使用Spring Initializr&#xff08;…

超强算力 Orange Pi Kunpeng Pro 开发板基础测评与体验

目录 开箱体验资源简介系统启动连接网络登录系统通过桌面登录通过串口登录通过 SSH 登录配置散热风扇 算力测试MNIST示例MBNET示例 体验总结 大家好&#xff0c;我是 Hello 阿尔法&#xff0c;有幸接到 CSDN 的邀请参与 Orange Pi Kunpeng Pro 开发板的测评活动&#xff0c;本文…

【Redis】redis高阶-使用zset实现延时队列

Hi,大家好&#xff0c;我是抢老婆酸奶的小肥仔。 最近在使用redis时&#xff0c;就想能不能用其实现消息队列&#xff1f;也在网上看了下其他小伙伴写的实现&#xff0c;结合自身业务实现了如下消息队列&#xff0c;希望对大家有用。 废话不多说&#xff0c;直接开撸。 1、为…

The minCompileSdk (34) specified in adependency‘s AAR metadata

新版AS新增Activity的时候&#xff0c;数据结构是&#xff1a;import androidx.activity.EdgeToEdge; import androidx.appcompat.app.AppCompatActivity; import androidx.core.graphics.Insets; import androidx.core.view.ViewCompat; import androidx.core.view.WindowInse…

hmcode硬件编程1

在/home/golemon/hmcode/applications/sample/wifi-iot/app内创建文件夹。 这里创建了d_6_3文件夹 . ├── BUILD.gn ├── d_6_3 │ ├── BUILD.gn │ └── lab.c ├── demolink │ ├── BUILD.gn │ └── helloworld.c ├── iothardware │ ├── B…

安装Lubuntu24.04

Lubuntu24.04安装过程与22.04、20.04等完全一致。 记录 01 02 03 04 05 09 给出提示 10 11 12 13 特点 Lubuntu 22.04的特点主要包括以下几点&#xff1a; 轻量级且高效&#xff1a;Lubuntu作为Ubuntu的一个轻量级分支&#xff0c;专注于为低端电脑、老旧电脑或需要最大限…

【Java】设计一个支持敏感数据存储和传输安全的加解密平台

一、问题解析 在一个应用系统运行过程中&#xff0c;需要记录、传输很多数据&#xff0c;这些数据有的是非常敏感的&#xff0c;比如用户姓名、手机号码、密码、甚至信用卡号等等。这些数据如果直接存储在数据库&#xff0c;记录在日志中&#xff0c;或者在公网上传输的话&…

kubernetes之安装ingress-nginx(k8s1.19版本之后)

ingress-nginx 1. 项目地址2. 操作环节3. 测试3.1 部署nginx及tomcat3.2 部署ingress 1. 项目地址 ingress-nginx项目地址 2. 操作环节 rootmaster1:~# kubectl apply -f nginx-ingress-controller/manifests/rootmaster1:~# kubectl get pods -n ingress-nginx NAME …

如何在QGIS中加载MapBox图源

在设计行业中需要多风格地图的调用&#xff0c;不管是规划、建筑设计还是景观&#xff0c;分析图的工作量都大&#xff0c;有好的底图&#xff0c;会事半功倍。 针对不同项目&#xff0c;会选择不同配色的底图&#xff0c;以便让设计内容中的呈现足够清晰。 这里就来分享一个…

DP读书:《半导体物理学(第八版)》(七) 金属与半导体的接触- 10 min 速通(载流子分布)

《半导体物理学&#xff08;第八版&#xff09;》10 min 速通 金属与半导体的接触 7.1 金属与半导体的接触及其能带图7.1.1 金属和半导体的功函数7.1.2 接触电势差7.1.3 表面态对接触势垒的影响 7.2 金属半导体接触整流理论7.2.1 扩散理论7.2.2 热电子发射理论7.2.3 镜像力和隧…

深度神经网络——什么是梯度下降?

如果对神经网络的训练有所了解&#xff0c;那么很可能已经听说过“梯度下降”这一术语。梯度下降是提升神经网络性能、降低其误差率的主要技术手段。然而&#xff0c;对于机器学习新手来说&#xff0c;梯度下降的概念可能稍显晦涩。本文旨在帮助您直观理解梯度下降的工作原理。…

论文精读--Swin Transformer

想让ViT像CNN一样分成几个block&#xff0c;做层级式的特征提取&#xff0c;从而使提取出的特征有多尺度的概念 Abstract This paper presents a new vision Transformer, called Swin Transformer, that capably serves as a general-purpose backbone for computer vision. …

cesium 的初步认识

Cesium是一个基于JavaScript开发的WebGL三维地球和地图可视化库。它利用了现代Web技术&#xff0c;如HTML5、WebGL和WebAssembly&#xff0c;来提供跨平台和跨浏览器的三维地理空间数据可视化。Cesium的主要特点包括&#xff1a; 跨平台、跨浏览器&#xff1a;无需额外插件&am…

Python 装饰器为被包装的函数添加参数

文章目录 需求:方案解析 需求: 我们想编写一个装饰器为被包装的函数添加额外的参数。但是&#xff0c;添加的参数不能影响到该函数已有的调用约定 方案 from functools import wrapsdef optional_debug(func):wraps(func)def wrapper(*args, debugFalse, **kwargs):if debug…

常见4种时间管理方法及实施步骤(收藏版)

有效的时间管理方法&#xff0c;不仅能够保证项目按时交付&#xff0c;还能提高开发效率&#xff0c;减少成本超支和质量风险。如果缺乏明确的时间规划&#xff0c;可能会导致任务延误&#xff1b;容易造成资源分配不当&#xff0c;导致整体效率低下和成本增加。 因此有效的时间…

anaconda pycharm jupter分别是

Anaconda Anaconda是一个面向数据科学的Python发行版&#xff0c;它包含了Python解释器、conda包管理器、以及大量的科学计算和数据分析库。Anaconda的主要功能是提供一个易于管理的环境&#xff0c;用于安装、运行和更新Python包&#xff0c;同时支持创建和切换不同的Python环…

Python高级编程:数据库操作与ORM

Python高级编程:数据库操作与ORM 在前几篇文章中,我们探讨了Python的基础语法、面向对象编程、标准库、第三方库、并发编程、异步编程以及网络编程与网络爬虫。在这篇文章中,我们将深入探讨Python中的数据库操作与对象关系映射(ORM)。这些技术对于持久化数据、数据查询和…

docker 安装mysql,redis,rabbitmq

文章目录 docker 安装ngnix&#xff0c;mysql,redis,rabbitmq安装docker1.安装下载docker-ce源命令2.安装docker3.查看版本4.查看docker状态5.启动docker6.测试安装ngnix 安装mysql8.0.361.拉取mysql镜像2.安装mysql8 安装redis1.拉取redis7.0.11镜像2.安装redis3.进入容器内部…