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;
		} 
		/*去除页眉页脚*/
	}