Vue问题记录

一、数据更新问题

数据更改界面没更新问题
原因：数据层次太多，没有触发render函数进行自动更新
1、需手动调用

this.$forceUpdate()

2、数组更新方式

Vue.set(array, index, newData)

二、调用控件的方法报错

原因：默认Visible是false，在设置visible=ture的方法中同时调用控件里的方法，此时ref还未加入到refs里面

setTimeout(() => {
  this.$refs.car.goTo(index, true)
}, 0)

即使延时为0，但是setTimeout方法是在所有方法走完才调用，此时ref已经加入到了refs里了

三、form表单问题

1、使用form表单显示数据时，有多个v-if，此时会出现下面那个数据设置不上去

解决方法：
使用多个setTimeout，第一个是设置上面的数据，第二个是设置设置不是数据的那几个数据

        getVoucherIssuanceGet(params).then(res => {
          this.data = res.resultBody
          this.dateType = this.data.dateType + ''
          this.template = this.data.templateArray
          // 通过type设置某个view显示与否
          this.onChangeType(this.data.distributeType)
          setTimeout(() => {
            this.form.setFieldsValue({
              'voucherUseRuleId': this.data.voucherUseRuleId,
              'dateType': this.dateType,
              'voucherDays': this.data.voucherDays
            })
          }, 0)
          setTimeout(() => {
            this.form.setFieldsValue({
              'distributeType': this.data.distributeType,
              'userId': this.data.userId
            })
          }, 200)
        })

2、form表单使用for循环设置（类似于动态添加formitemb

跟其他非form循环不同的是在子控件中使用下标用的单引号是``,而非‘’

四、下载Excel文件时乱码

解决方案：设置 responseType: 'blob'
具体实现见代码

      const token = Vue.ls.get(ACCESS_TOKEN) || process.env.VUE_APP_AUTH_KEY
      axios.get(this.action,{params: param, headers:{ Authorization: token}, responseType: 'blob'},).then((response) => {
          console.log(response, 'response')
          const blob = new Blob([response.data], {
            type: 'application/vnd.ms-excel'
          })
          console.log(blob, 'blob')
          const fileName = '数据.xlsx'
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(new Blob([response.data]))
          link.download = fileName
          link.click()
          window.URL.revokeObjectURL(link.href) // 释放内存
　　　　}).catch(function (res) {})