一、数据更新问题
数据更改界面没更新问题
原因：数据层次太多，没有触发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) {})
