前端知识点阶段总结
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;
}
//数组去重
unique:function(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
j--;
}
}
}
return arr;
}
17.判断是否为数字类型
!(row.leader instanceof Number)
学贵有恒,而行胜于言