一、数据更新问题

数据更改界面没更新问题
原因：数据层次太多，没有触发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循环不同的是在子控件中使用下标用的单引号是``,而非‘’

<template>
  <dev>
    <a-card title="首页频道管理">
      <a-form :form="form" @submit="onCommitChannel">
        <a-form-item
          v-bind="formCol"
          label="背景色"
        >
          <a-input
            v-decorator="[
              'backColor',
              { rules: [{ required: false }] },
            ]"
            placeholder="请输入背景色"
          />
          <p>默认背景色为白色，若需调整模块背景颜色，请输入十六进制颜色码，如“#ffff00”</p>
        </a-form-item>
        <a-card
          v-for="(num, index) in couponNum"
          :key="num"
        >
          <div slot="title">
            <p>频道 {{ num }}</p>
          </div>
          <a-form-item
            v-bind="formCol"
            label="频道名称（中文）"
          >
            <a-input
              v-decorator="[
                `channelCNList[${index}]`,
                { rules: [{ required: true, message: '请输入频道中文名称' }] },
              ]"
              placeholder="请输入频道中文名称"
            />
          </a-form-item>
        </a-card>
        <div class="row-button">
          <a-button type="primary" html-type="submit">保存</a-button>
          <a-button type="danger" icon="reload" class="marginLeft">更新首页</a-button>
        </div>
      </a-form>
    </a-card>
  </dev>
</template>

<script>
export default {
  data () {
    return {
      couponNum: 2,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    onCommitChannel (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
          console.log(values, 'values')
        if (!err) {
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
  .row-button{
    display: flex;
    padding-top: 10px;
    width: 800px;
    justify-content: center
  }
  .marginLeft {
    margin-left: 20px
  }
</style>

四、下载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) {})