1.表格分页记忆
data中写入
getRowKeys(row) {
return row.ROW_ID;
},
在template模板的表格里加入
<el-table :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true" align="center"></el-table-column>
2.分页
template模板
<el-pagination background v-show="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5,30,100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
方法
handleSizeChange(val){
this.pageSize = val;
this.getData()
},
handleCurrentChange(val){
this.pageNum = val;
this.getData()
},
3.二维码生成
安装插件
npm i QRCode --save
在组件中使用
import QRCode from 'qrcode'
template中
<div id='qrcode '></div>
js代码
qrcode(val) {
let qrcode = new QRCode('qrcode ', {
width: 210,
height: 160,
text: val, // 二维码地址
colorDark: "#000",
colorLight: "#fff"
});
},
4.单元格编辑
template
<template slot-scope="{row,$index}">
<div @click="changeNum($index,row)" class="model" >
<el-input v-if="editable[$index]" v-model='row.surplusCount' @blur='changeNumTwo($index)' @change="checkNum(row)" class="myClass " size="mini"></el-input>
<span v-else>{{row.surplusCount}}</span>
</div>
</template>
data里保存
editable:[],
方法：
//单元格可编辑
changeNum(index,row){
if(parseInt(row.surplusCount)===0){
return
}
this.editable[index] = true;
this.$set(this.editable,index,true)
},
//失去焦点操作
changeNumTwo(index){
this.editable[index] = false;
this.$set(this.editable,index,false)
},
5.数组分类
var aa = [
{
id: 1,
imei: '',
store_name: '合肥店'
},
{
id: 3,
imei: '3',
store_name: '合肥店'
},
{
id: 2,
imei: '1',
store_name: '芜湖店'
},
{
id: 4,
imei: '34343',
store_name: '上海店'
}
];
1.方法一
var list = aa,
flag = 0,
data = [];
for(var i = 0; i< list.length; i++) {
var az = '';
for (var j = 0; j < data.length; j++) {
if(data[j][0].store_name == list[i].store_name) {
flag = 1;
az = j;
break;
}
}
if(flag == 1){
data[az].push(list[i]);
flag = 0;
} else if (flag == 0) {
wdy = new Array();
wdy.push(list[i]);
data.push(wdy);
}
}
console.log(data)
结果如下
2.方法2
for(var i = 0; i < list.length; i++) {
if(!data[list[i].store_name]) {
var arr = [];
arr.push(list[i]);
data[list[i].store_name] = arr;
}else {
data[list[i].store_name].push(list[i])
}
}
console.log(data);
结果如下
3.方法3
var moth = [],
flag = 0,
list = aa;
var wdy = {
title: '',
sur_name: ''
}
for (var i = 0; i < list.length; i++) {
var az = '';
for (var j = 0; j < moth.length; j++) {
if (moth[j].title == list[i]['store_name']) {
flag = 1;
az = j;
break;
}
}
if (flag == 1) {
var ab = moth[az];
ab.sur_name.push(list[i]);
flag = 0;
} else if (flag == 0) {
wdy = {};
wdy.title = list[i]['store_name'];
wdy.sur_name = new Array();
wdy.sur_name.push(list[i]);
moth.push(wdy);
}
}
console.log(moth);
结果如下
6.合并单元格
1.在data中设置变量
data(){
return{
spanArr:[],
spanPos:0
}
}
2.在methods中设置方法，在获取表格数据getData()中调用
methods(){
getArr(data) {
this.spanArr = [];
this.spanPos = 0;
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.spanPos = 0;
} else {
//判断流水码
if (
data[i].operationSerialNumberB == data[i - 1].operationSerialNumberB
) {
this.spanArr[this.spanPos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.spanPos = i;
}
}
}
},
}
3.在methods中设置方法，在表格申明
columIndex为需要合并的列的下标
methods(){
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
}
}
4.在表格中声明方法
<el-table :span-method="objectSpanMethod">
</el-table>
7.数组去重
最简单的方法
let arr = [1,2,3,4,5,1,1,2,2,1];
let _arr = Array.from(new Set(arr));
8.table表格样式
1.边框设置
<table style=" table-layout: fixed;margin-right:10px;border-collapse: collapse" width="100%" border="1" cellpadding="0" cellspacing="0"></table>
2.折行设置
<td colspan="3" style="word-wrap: break-word;padding:2px 5px"></td>
9.前端打印
1.用window.print()打印
<div style="width: 800px;display:none;" class="doPirnt-content">
需要打印的内容
</div>
js代码
printOrder(e) {
//获取当前页的html代码
var printhtml = document.getElementsByClassName("doPirnt-content")[0].innerHTML;
var f = document.getElementById("printf");
if (f) {
document.body.removeChild(f);
}
var iframe = document.createElement("iframe");
iframe.id = "printf";
iframe.style.width = "0";
iframe.style.height = "0";
iframe.style.border = "none";
document.body.appendChild(iframe);
setTimeout(() => {
iframe.contentDocument.open();
iframe.contentDocument.write(printhtml);
iframe.contentDocument.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
}, 100);
},
监听浏览器打印的事件
var afterPrint = function() {
console.log("printing already complated");
};
var beforePrint = function() {
console.log("Functionality to run before printing.");
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia("print");
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
2.用vue-print-nb插件打印
1.安装
npm install vue-print-nb --save
2.在main.js中引用
import Print from 'vue-print-nb'
Vue.use(Print);
3.在组件中使用
<div id='printArea'>需要打印的内容</div>
<button v-print="'#printArea'">点击打印</button>
3.注意打印的样式（一般css是不会作用的）
@media print {
section {page-break-before: always;}/*这个代表可以分页批量打印*/
h1 {page-break-after: always;}
p {page-break-inside: avoid;}
}
/*去掉页眉页脚*/
@page {
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
/*如果打印出来发现被遮盖，在打印设置中把边距调成最小值即可*/
外联样式引入
<link rel="stylesheet" href="print.css" media="print" />
10.前端批量打印发票
芽儿呦，这把我脑子要想破了，因为每个发票都有个二维码。
思路就是呢，把票据里的数据循环一次，然后用字符串模板拼出一个新的网页，直接打印这个网页就行，然后css中用page-break-before: always来实现批量分页打印。
首先搞个新的dom节点标记为打印区域
<div id='printArea'></div>
JS代码
doPrint(data) {
let html = "";
data.forEach((item, index) => {
html +=
'<div class="box" style="page-break-after:always;display: flex; padding-top:5px;padding-left:10px" ><div class="left">';
html +=
'<div><label class="control-label" id="supplierName" style="font-style:normal;">供应商名称:</label>';
html +=
' <em id="supplierName" style="font-style:normal;word-break:break-all ">' +
item.supplierName +
"</em></div>"; //供应商名称
html +=
'<div ><label id="materialCode" style="font-style:normal;">物料代码:</label>';
html +=
' <em id="materialCode" style="font-style:normal;word-break:break-all ">' +
item.materialCode +
"</em></div>"; //物料代码
html +=
'<div ><label id="materialDesc" style="font-style:normal;">物料描述:</label>';
html +=
' <em id="materialDesc" style="font-style:normal;word-break:break-all ">' +
item.materialDesc +
"</em></div>"; //物料描述
html +=
'<div><label id="batchCode" style="font-style:normal;">批次:</label>';
html +=
'<em id="batchCode" style="font-style:normal;word-break:break-all ">' +
item.batchCode +
"</em></div>"; //批次
html +=
'<div style="font-style:normal;"><label id="packCapacity">数量:</label>';
html +=
'<em id="packCapacity" style="font-style:normal;word-break:break-all ">' +
item.packCapacity +
"</em></div>"; //数量
html +=
'<div style="font-style:normal;"><label id="createDate">小包号:</label>';
html +=
'<em id="materialProductDate" style="font-style:normal;word-break:break-all ">' +
item.currentCartonNo +
"/" +
item.totalPackCount +
"</em></div>"; //小包号
html +=
'<div style="font-style:normal;"><label id="createDate">生产日期:</label>';
html +=
'<em id="materialProductDate" style="font-style:normal;word-break:break-all ">' +
item.materialProductDate +
"</em></div></div>"; //生产日期
html +=
' <div class="right" style="display:flex;flex-direction:column;margin-left:5px"><div class="x_content" style="float:right;"id="qrcodepic' +
index +
'" style="width:100%;height:100%;"></div>'; //二维码
html +=
'<div class="icon" style="font-style:normal;" >' +
item.minPackBarCode +
"</div></div></div>"; //二维码里的数字
});
document.getElementById("printArea").innerHTML = html;
var head_str =
"<html><head><style>@media print{@page{margin:0;size:auto;}.box{width:70mm;height:40mm;}.right{width:19mm;font-size:3px}.left{width:40mm;font-size:8px}.icon{font-size:3px}}</style><title>打印箱贴</title></head><body>"; //先生成头部
var foot_str = "</body></html>"; //生成尾部
var new_str = document.getElementById("printArea").innerHTML; //获取指定打印区域
document.body.innerHTML = head_str + new_str + foot_str;
//构建新网页(关键步骤,必须先构建新网页,在生成二维码,否则不能显示二维码)
for (var index = 0; index < data.length; index++) {
var str = "";
if (document.getElementById("qrcodepic" + index)) {
// document.getElementById("qrcodepic" + index).innerHTML = "";
}
var qrcode = "qrcodepic" + index;
str = data[index].minPackBarCode;
if (document.getElementById(qrcode)) {
var qrcode = new QRCode(document.getElementById(qrcode), {
text: str,
width: 60,
height: 60,
colorDark: "#000000",
colorLight: "#ffffff"
});
// correctLevel: QRCode.CorrectLevel.
}
}
var afterPrint = function() {
console.log("printing already complated");//这就是个监听浏览器打印的钩子函数
};
var beforePrint = function() {
console.log("Functionality to run before printing.");//这也是个监听浏览器打印的钩子函数
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia("print");
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
setTimeout(function() {
window.print();
}, 500);
return false;
},
11.element-ui 表格复选框禁选事件
<el-table-column type="selection" :selectable='checkeIsComputed' :reserve-selection="true" width="40" align="center"></el-table-column>
methods:
checkeIsComputed(row){
return row.status == '1';
}
12.数组对象相同合并，数值相加
如果数组中存在多个对象，他们的ID和name相同，要求合并，然后数值累加起来。
merge(list) {
let result = [];
let cache = {};
list.forEach(item => {
let key = `name:${item.name},id:${item.id}`;
let index = cache[key];
if (index !== undefined) {
result[index].number+= item.number;
} else {
result.push(Object.assign({}, item));
cache[key] = result.length - 1;
}
});
return result;
},
13.数组排序
用sort的源生方法，arr.sort(compare(“prop”))
var compare = function(prop) {
return function(obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
};
};
arr.sort(compare("age"));
14 源生表格table的合并(数字直接相加)
参数说明：1.table1：表格的ID；2.starRow：从第几行开始合并，第一行为0；3.第几行开始不合并，全部合并为0；4.合并的依据列名，第一列为0
SpanGrid(table1, startRow, endRow, col) {
var tb = document.getElementById(table1);
if (!tb || !tb.rows || tb.rows.length <= 0) {
return;
}
if (
col >= tb.rows[0].cells.length ||
(startRow >= endRow && endRow != 0)
) {
return;
}
if (endRow == 0) {
endRow = tb.rows.length - 1;
}
for (var i = startRow; i < endRow; i++) {
if (
tb.rows[startRow].cells[col].innerHTML ==
tb.rows[i + 1].cells[col].innerHTML &&
tb.rows[startRow].cells[col + 2].innerHTML ==
tb.rows[i + 1].cells[col + 2].innerHTML
) {
//如果相等就合并单元格
tb.rows[startRow].cells[col + 5].innerHTML =
parseInt(tb.rows[i + 1].cells[col + 5].innerHTML) +
parseInt(tb.rows[startRow].cells[col + 5].innerHTML);
tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[col + 5]);
tb.rows[startRow].cells[col + 5].rowSpan =
tb.rows[startRow].cells[col + 5].rowSpan + 1;
} else {
this.SpanGrid(table1, i + 1, endRow, col);
break;
}
}
},
15 时间戳转换
getdate(time) {
var now = new Date(time),
y = now.getFullYear(),
m = now.getMonth() + 1,
d = now.getDate();
return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
},
16 动态替换对象的Key
var student = {id:1,name:'小王'};
var keyMap = {'id':'uid','name':'uname'};
for (key in student){
var newKey = keyMap[key];
if(newKey){
student[newKey] = student[key];
delete object[key];
}
}
17 闭包
先看一段代码
var arr = [];
for(var i = 0; i< 5; i++){
arr[i] = function(){
return i;
}
}
arr[0](); // 5
在这个问题中，i 这个变量是被共享的。当循环结束之后，i 已经变成5了。所以arr0输出的是5。
var arr = [];
for(var i = 0; i< 5; i++){
arr[i] = (function(i){
return function(){
return i;
}
})(i)
}
arr[0](); // 0
在定义arr[i]的匿名函数时，就需要记住 i 的值，而不能让它一直是变动的。用闭包的思路是让i在每次迭代的时候，都产生一个私有的作用域，在这个私有的作用域中保存当前i的值，每个作用域的i是独立不影响的，也就避免了共用 i，而 i 到最后都是5的问题。
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
