前端知识点阶段总结

1.不同分辨率动态赋值

if (window.innerWidth > 1440) {
    this.dialogwidth = "27.5%";
} else {
    this.dialogwidth = "37%";
}
dialog""

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-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>&nbsp;
    <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)