vue里的小技巧

vue里的小技巧

1.vue里更改在el-dialog里更改内容后会影响到el-table的数据也会改变 这是处理方法 this.List2=JSON.parse(JSON.stringify(this.Arr))这样就不会改变了
2.vue里将数据分组方法
const groupedSelection = {};
let count = 0;
this.multipleSelection.forEach(item => {
let key;
if (item.AA !== undefined && item.AA !== “”) {
key = item.AA;
} else {
key = Group_${count + 1};
count++;
}
if (!groupedSelection[key]) {
groupedSelection[key] = [];
}
groupedSelection[key].push(item);
});
this.BottleList = Object.values(groupedSelection);
3. 二维码生成import QRCode from “qrcodejs2”;
// 删除之前生成的二维码元素
const qrCodeElements = document.querySelectorAll(‘[id^=qrcode-]’);
qrCodeElements.forEach((element) => {
element.innerHTML = ‘’;
});
this.BottleList.forEach((group, index) => {
const item = group[0];
const qrcode = new QRCode(“qrcode-” + item.increase, {
width: 50,
height: 50,//设置宽高
});
qrcode.makeCode(item.Code);//要生成内容
});

4.条码import JsBarcode from “jsbarcode”; // 生成条形码
this.PrintList.forEach((item, index) => {
const svg = this.$refs[‘barcode${item.increase}`]; // 获取对应条码的 SVG 元素
JsBarcode(svg, item.increase.toString(), {
width: 1, // 设置条码的宽度，单位为像素
height: 30, // 设置条码的高度，单位为像素
displayValue: false, // 将 displayValue 设置为 false 来隐藏条码下方的文本内容
}); // 使用 JsBarcode 生成条码
});