前端实际开发常用技巧

拼接数据.png
日期格式化.png

  submitForm(formName) {
    let el: any = this.$refs[formName];
    el.validate(valid => {
      if (valid) {
        addEditSupplyList(
          {
            supplychain: JSON.stringify(this.saveApplyChainReq)
          },
          res => {
            if (res.status == 200) {
              this.$message.success("保存成功");
              this.dialogVisible = false;
              this.search();
            } else {
              this.$message.error(res.msg);
            }
          },
          err => {}
        );
      } else {
        // this.$message.error("请检查必填信息")
        return false;
      }
    });
  }
// this.$refs[formName]没有validate这个属性,需要重新定义一个中间变量

  // 获得token
  getToken(): string {
    const token = localStorage.getItem('token') || ''
    return token
  }

  setToken(token: string): void {
    localStorage.setItem('token', token)
  }
  

this指向与setInterval

// 在ts代码里面访问数组下面的值和获得复选框的值
 // 复选框改变时
  handleCheckbox(id) {
    this.orderInfo.forEach(item => {
      if (item.orderMain.id === id) {
        this.addressId = item.orderMain.addressId;
        this.productAmountTotal =
          this.productAmountTotal + item.orderMain.productAmountTotal;
        this.orderNumList.push(item.orderMain.orderNumber);
      }
    });
  }
  // 合并付款
  mergePay() {
    let ordernumberlist = this.orderNumList.toString();
    location.href = `/industry/pay/${ordernumberlist}?addressId=${
      this.addressId
    }&totalMoney=${this.productAmountTotal}`;
    this.orderNumList = [];
    this.productAmountTotal = 0;
  }
// 模板部分
 <input type="checkbox" v-if="orderReqData.status == 0" v-model="order.orderMain.checked" @click="handleCheckbox(order.orderMain.id)">   

// 事件委托,我理解为一个前端性能优化.比方说要给下面的li绑定click事件,确实能达到我们想要的效果.但是性能不佳,因为每次要查找li,浪费了大量的事件.事件委托是利用事件冒泡原理(自内向外触发事件,阻止事件冒泡有stopProgapation和return false这样的方法)将事件委托给父级元素,具体是使用target,srcElement是为了兼容ie
 <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
        window.onload = function () {
            var oUl = document.getElementById("ul1");
            oUl.onclick = function(e){
                var ev = e || window.event;
                var target = e.target || e.srcElement;
                if(target.nodeName.toLowerCase() == "li"){
                    alert("child事件被触发");
                }
            }