zqy233的前端学习笔记功能实现
实现js控制上传文件
element-ui消息提示$message重叠问题
函数中程序同步执行，先后触发两个$message，此时两个$message的弹窗重叠
这是因为vue的异步更新队列有缓冲机制，第一次$message触发时，并没有更新dom，导致第二个$message取item.$el.offsetHeight取到的高度为0，所以第二个$message只是下移了默认的offset(即16px)，并没有加上第一个$message的offsetHeight。
使用setTimeout解决
js
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.size < maxFileSize) {
formData.append('fileList', file);
} else {
setTimeout(() => {
this.$message.warning({
type: 'success',
message: '文件大小限制（10MB）：' + file.name,
});
}, i * 50);
}
}
for (let i = 0; i < files.length; i++) {
const file = files[i];
if (file.size < maxFileSize) {
formData.append('fileList', file);
} else {
setTimeout(() => {
this.$message.warning({
type: 'success',
message: '文件大小限制（10MB）：' + file.name,
});
}, i * 50);
}
}
安装xlsx
sh
npm i -s xlsx
npm i -s xlsx
示例
js
// Acquire Data (reference to the HTML table)
const table_elt = document.getElementById("my-table-id")
// Extract Data (create a workbook object from the table)
const workbook = XLSX.utils.table_to_book(table_elt)
// Process Data (add a new row)
c ws = workbook.Sheets["Sheet1"]
XLSX.utils.sheet_add_aoa(ws, [["Created " + new Date().toISOString()]], { origin: -1 })
// Package and Release Data (`writeFile` tries to write and save an XLSB file)
XLSX.writeFile(workbook, "Report.xlsb")
// Acquire Data (reference to the HTML table)
const table_elt = document.getElementById("my-table-id")
// Extract Data (create a workbook object from the table)
const workbook = XLSX.utils.table_to_book(table_elt)
// Process Data (add a new row)
c ws = workbook.Sheets["Sheet1"]
XLSX.utils.sheet_add_aoa(ws, [["Created " + new Date().toISOString()]], { origin: -1 })
// Package and Release Data (`writeFile` tries to write and save an XLSB file)
XLSX.writeFile(workbook, "Report.xlsb")
处理JSON和JS数据
JSON和JS数据往往表示单个工作表。本节将使用一些实用函数来生成工作簿
创建新工作簿
js
let workbook = XLSX.utils.book_new()
let workbook = XLSX.utils.book_new()
book_new函数创建一个没有工作表的空工作簿 电子表格软件通常至少需要一份工作表，并在用户界面中强制执行该要求。xlsx库在写入时强制执行该要求，如果将空工作簿传递给写入函数，则会引发错误
JS数组创建工作表
js
let worksheet = XLSX.utils.aoa_to_sheet(aoa, opts)
let worksheet = XLSX.utils.aoa_to_sheet(aoa, opts)
以下代码生成了一个工作表，其中单元格A1设置为字符串A1，单元格B1设置为B1，等等：
js
let worksheet = XLSX.utils.aoa_to_sheet([
["A1", "B1", "C1"],
["A2", "B2", "C2"],
["A3", "B3", "C3"]
])
let worksheet = XLSX.utils.aoa_to_sheet([
["A1", "B1", "C1"],
["A2", "B2", "C2"],
["A3", "B3", "C3"]
])
aoa_to_sheet默认情况下，为数组中的每个对象生成一个标题行和一行。可选opts参数具有控制列顺序和标题输出的设置
vue文本识别 “ \n ” 换行
1.使用css实现
css
white-space: pre-wrap;
white-space: pre-wrap;
2.使用v-html实现
首先，将字符串里的\n替换为<br>，然后用v-html指令渲染字符串为innerHTML
JS部分
js
this.text = res.data.replace(/\n/g, '<br>')
this.text = res.data.replace(/\n/g, '<br>')
HTML部分
vue
<div v-html="text"></div>
<div v-html="text"></div>