iView中Select无法自动填充值
如下所示,使用的iView组件,在Select标签中有两个Option,其中一个是全部选项,当点击全部的时候,就会选中所有的工厂,再次点击全部的时候,可以取消选择所有工厂,同时不影响单个点击工厂。
<Select :disabled="isUpdate == true" transfer multiple filterable clearable v-model="queryData.factories"
:max-tag-count="12" :placeholder="$t('sys.base.selectPlaceholder')">
<Option label="全部" :value='selectAllVa' @click.native='selectAll'></Option>
<Option v-for="item in factoryList" :value="item.factory_id" :key="item.factory_id"
:label="item.factory_name">
</Option>
</Select>
selectAll() {
if (this.queryData.factories.length < this.factoryList.length) {
this.queryData.factories = []
this.factoryList.map((item) => {
this.queryData.factories.push(item.factory_id)
})
} else {
this.queryData.factories = []
}
},
但是这里有一个问题,可以看到我使用了 disabled 这个属性,就是说在修改而不是新增时,让默认展示工厂名字,同时不可修改工厂,
错误代码,如下图所示,findFactoryList是异步的,而js代码是顺序执行,也就是说在执行findFactoryList()方法时,其实已经走到tempJson里面去了。
init() {
let ths = this;
findFactoryList({
need_contrl: true
}).then(res => {
let { result_code, result_msg } = res
if (result_code === '0') {
this.factoryList = res.data
}
})
this.isUpdate = false;
if (this.isUpdateM()) {
let tempJson = JSON.parse(this.params.search_param_json);
this.queryData.factories = tempJson.factory_ids;
this.isUpdate = true;
this.$nextTick(res => {
ths.preview();
})
}
},
但如果下面这行代码没有,Select标签中只有一个Option是完全没问题,上述在findFactoryList执行完毕后会自动展示工厂名,而不是一片空白。
<Option label="全部" :value='selectAllVa' @click.native='selectAll'></Option>
但偏偏有上面这行代码,有两个Option,其中一个还是v-for循环,理论上没问题,但确实有问题。
不断的排查后,发现直接等待请求完后就可以,也就是等工厂返回了数据,那么没啥问题,就是如下代码,
init() {
let ths = this;
findFactoryList({
need_contrl: true
}).then(res => {
let { result_code, result_msg } = res
if (result_code === '0') {
this.factoryList = res.data
this.isUpdate = false;
if (this.isUpdateM()) {
let tempJson = JSON.parse(this.params.search_param_json);
// console.log(tempJson)
this.report_name = this.params.report_name
this.queryData.period_times = [];
this.queryData.period_times.push(tempJson.start_time);
this.queryData.period_times.push(tempJson.end_time);
this.queryData.factories = tempJson.factory_ids;
this.queryData.info_id = tempJson.info_id;
this.isUpdate = true;
this.$nextTick(res => {
ths.preview();
})
}
}
})
},