一.qs插件
- qs是一个增加一些安全性查询字符串解析和序列化字符串的库,可以进行对象与字符串之间的一个转换。
1.安装方式
npm install qs
2.vue 项目中导入方式
import qs from 'qs'
//vue项目中 main.js设置全局属性的方式:
Vue.prototype.$qs=qs
3.qs使用
- 它有两个方法:stringify和parse。
qs.stringify(data)
stringify方法,是将对象序列化成url形式的字符串,以&符号进行拼接。 eg:
const userInfo = { name: "xiaoming", age: "22" };
let info = qs.stringify(userInfo);
console.log(info); //name=xiaoming&age=22
qs.parse(data)
parse方法,是将URL形式的字符串解析成对象 eg:
const userInfo = "name=xiaoming&age=22";
let info = qs.parse(userInfo);
console.log(info, "转换成parse");
//{ name: "xiaoming", age: "22" } "转换成parse"
当需要传递数组时,可以使用下面的方法
- 默认情况
console.log(decodeURI(qs.stringify({ a: ["b", "c", "d"] })));
//输出:a[0]=b&a[1]=c&a[2]=d (decodeURI浏览器解码)
- 重写这种默认方式为false
console.log(qs.stringify({ a: ["b", "c", "d"] }, { indices: false }));
// 输出 a=b&a=c&a=d
- 可以通过 arrayFormat选项进行格式化输出
console.log(
qs.stringify({ a: ["b", "c", "d"] }, { arrayFormat: "indices" })
); // 输出 a[0]=b&a[1]=c&a[2]=d
console.log(
qs.stringify({ a: ["b", "c", "d"] }, { arrayFormat: "brackets" })
); // 输出 a[]=b&a[]=c&a[]=d
console.log(
qs.stringify({ a: ["b", "c", "d"] }, { arrayFormat: "repeat" })
); // 输出 a=b&a=c&a=d
二. lodash插件
是一个JavaScript语言的工具库,提供了很多实用工具函数,可以帮助我们更便捷地对数据进行操作。它的使用非常广泛,可以用于Web开发、后端开发等领域。
1.安装插件
npm i --save lodash
2.项目中导入方式
//全部应用
import _ from 'lodash'
//按需应用
import { cloneDeep,throttle } from "lodash";
3.lodash的使用,请查看文档
三.导出xlsx格式
1.安装插件 npm import xlsx --save 注:如果vue2中引入XLSX插件,出现“export 'default' (imported as 'XLSX') was not found in 'xlsx',建议采用版本npm import xlsx@0.16.0 --save 2.项目中引用方式
import XLSX from "xlsx";
//导出(注:如果导出表格有字段需要转译,比如:1:通过,2:不通过,
比如时间格式;拿到数据时需在js里面转译,在html用过滤器转译导出表格后还是转译前的数据)
exportData(){
//过滤要导出的数据,如果是全表导出就不需要过滤数据
const data = this.exporList.map((item) => [
item.id,
item.clientName,
item.createTime,
item.clientId,
item.operatorTime,
]);
//导出数据对应的标题
const headers = [
"列表ID",
"客户姓名",
"申请日期",
"客户号",
"审核时间",
];
//并使用`aoa_to_sheet`方法将它们转换为一个工作表
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data]);
//然后使用`book_new`方法创建一个新的工作簿
const workbook = XLSX.utils.book_new();
//将工作表添加到工作簿中
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
//最后调用`writeFile`方法将工作簿导出为Excel文件
XLSX.writeFile(workbook, "申请列表.xlsx");
}