前端知識點階段總結
阿新 • • 發佈：2020-12-27
1.不同解析度動態賦值
if (window.innerWidth > 1440) {
this.dialogwidth = "27.5%";
} else {
this.dialogwidth = "37%";
}
dialogwidth:""
2.table批量刪除選中行
let rows = this.$refs.tableRefName.getSelectAllRows();
let ids = [];
rows.forEach(item => ids.push(item.id));
api.delete(ids,response=>{})
3.動態切換元件
https://blog.csdn.net/liangmengbk/article/details/85013547
4.table元件 寫columns 屬性時render自定義內容
prop: "action", label: this.$t("noticePage.OPERATE"), align: "center", tableWidth: 260, render: (createElement, params) => { return createElement("div", [ createElement( "td-button", { style: "min-width:25px !important", attrs: { type: "text" }, on: { click: _ => { this.openDialog(params.row); } } }, "編輯" ) ]); } }
5.日期元件
-日期限制
pickerBeginDateBefore: { disabledDate: time => { let beginDateVal = new Date(this.ruleForm.patrolEndTime).getTime(); if (beginDateVal) { return time.getTime() > beginDateVal; //開始日期小於結束日期 } } }, pickerBeginDateAfter: { disabledDate: time => { let beginDateVal = new Date(this.ruleForm.patrolStartTime).getTime(); if (beginDateVal) { return ( //結束日期大於開始日期且小於開始日期加7天 time.getTime() < beginDateVal - 24 * 60 * 60 * 1000 || time.getTime() > beginDateVal + 30 * 24 * 60 * 60 * 1000 ); } } }
6.拖拽
https://blog.csdn.net/weixin_41910848/article/details/82218243
7.新增和更新調同一個元件時的判斷
if (this.title == "新增") {
this.addItems();
this.$nextTick(() => {
this.dialogClose();
});
} else {
this.editItems();
this.$nextTick(() => {
this.dialogClose();
});
}
dialogClose() {
this.$emit("changeVisible", false); //關閉
this.$emit("changeData"); //重新整理
}
8.forEach
schedulingListTemp.forEach((element) => {
var patrolUserIdTemp = element.patrolUserId;
var item = response.data.content.filter(
(t) => t.id == patrolUserIdTemp
);
if (item.length != 0) {
var temp = {};
temp.patrolPName = item[0].name;
temp.patrolPNameShow =
item[0].name + "(" + item[0].personNo + ")";
temp.patrolPeopleOrganizetion = item[0].deptName;
temp.patrolRouteText = element.patrolRouteText;
temp.patrolBeginTime = element.patrolBeginTime;
temp.patrolEndTime = element.patrolEndTime;
temp.patrolUserId = element.patrolUserId;
temp.patrolLineId = element.patrolLineId;
_this.schedulingList.push(temp);
} else {
var temp2 = {};
temp2.patrolPName = "";
temp2.patrolPNameShow = "";
temp2.patrolPeopleOrganizetion = "";
temp2.patrolRouteText = element.patrolRouteText;
temp2.patrolBeginTime = element.patrolBeginTime;
temp2.patrolEndTime = element.patrolEndTime;
temp2.patrolUserId = element.patrolUserId;
temp2.patrolLineId = element.patrolLineId;
_this.schedulingList.push(temp2);
}
});
9.新增和更新調同一個元件時的判斷
if (this.title == "新增") {
this.addItems();
this.$nextTick(() => {
this.dialogClose();
});
} else {
this.editItems();
this.$nextTick(() => {
this.dialogClose();
});
}
dialogClose() {
this.$emit("changeVisible", false); //關閉
this.$emit("changeData"); //重新整理
}
10.獲取當前時間
getCurrentDate () {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
if (hour < 10) {
hour = "0" + hour;
}
if (minute < 10) {
minute = "0" + minute;
}
if (second < 10) {
second = "0" + second;
}
var nowDate =
year +
"-" +
month +
"-" +
day +
" " +
hour +
":" +
minute +
":" +
second;
return nowDate;
}
11.明天
var tomrrowDay = new Date(
new Date().setDate(new Date().getDate() + 1)
).format("yyyy-MM-dd 00:00:00");
12.元件強制重新整理技巧
在實際開發過程中經常會遇到動態取值之後vue元件不能重新整理的問題，解決辦法就是利用v-if，改變狀態，強制重新整理
在要重新整理的元件上定義v-if=”hackReset”
v-if="hackReset"
data裡定義變數
hackReset: true
在需要重新整理的位置加上重新整理程式碼
this.hackReset = false;
this.$nextTick(() => {
this.hackReset = true;
});
13.匹配拼接
for (var i = 0; i < _this.patrolPeople.length; i++) {
if (_this.patrolPeople[i].patrolPName.match(_this.patrolUserName)) {
userIdTempArray.push(_this.patrolPeople[i].patrolPId);
}
}
userId = userIdTempArray.join(",");
if (userId === "") {
_this.schedulingList = [];
_this.total = 0;
return;
}
14.object物件取key和value
licenseN = Object.keys(row.action.licenseNumberMap);
statusN = Object.values(row.action.licenseNumberMap);
15.table中列值動態賦樣式
根據每一列alert0show,alert1show,alert3show的值來確定顯示哪個圖示
根據每一列patrolAlarm的值來設定文字的樣式 （動態賦class,class裡定義樣式）
<el-table-column prop="patrolAlarm" width="148" align="center">
<template slot-scope="scope">
<i class="el-icon-success" v-show="scope.row.alert0show" style="color:#7E9913"></i>
<i class="el-icon-warning" v-show="scope.row.alert1show" style="color:#FA4F4F"></i>
<i class="el-icon-time" v-show="scope.row.alert3show" style="color:#7E9913"></i>
<span
:class="((scope.row.patrolAlarm === '1') || (scope.row.patrolAlarm === '4') || (scope.row.patrolAlarm === '5')) ? 'redColor':'greenColor'"
>{{scope.row.sAlertType}}</span>
</template>
</el-table-column>
16.去重
listUnique(array) {
var r = [];
for (var i = 0, l = array.length; i < l; i++) {
for (var j = i + 1; j < l; j++)
if (JSON.stringify(array[i]) == JSON.stringify(array[j])) j = ++i;
r.push(array[i]);
}
return r;
}
unique(arr) {
var hash = [];
for (var i = 0; i < arr.length; i++) {
if (hash.indexOf(arr[i]) == -1) {
hash.push(arr[i]);
}
}
return hash;
}
17.判斷是否為數字型別
!(row.leader instanceof Number)