1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【vue下拉框动态绑定数据默认选中第一条】

【vue下拉框动态绑定数据默认选中第一条】

时间:2024-07-25 22:30:28

相关推荐

【vue下拉框动态绑定数据默认选中第一条】

vue下拉框动态绑定数据默认选中第一条

vue下拉框默认第一条默认第一条数据,下拉框的数据来自请求后台的接口。要求在每次新增时都要默认第一条数据。

新增的弹框如图所示,每次点击新增时,都是业务类型显示 商户默认。

解决方案:

原部分代码展示如下:

<el-form-item label="业务类型:" prop="busType"><el-select v-model="dataForm.busType" clearable placeholder="请选择"><el-option v-for="(item, index) in bus_type" :value="item.dictValue" :label="item.dictTag" :key="index"></el-option></el-select></el-form-item>

原部分script代码:

<!--script:代码-->data () {return {bus_type: []}}created () {this.getSelection()},// 获取字典项getSelection () {this.$http({url: this.$http.adornUrl('/sys/xxx/xxx'),method: 'get',params: this.$http.adornParams({'dictCode': 'thidType'})}).then(({data}) => {if (data && data.msgCd === 'OPR00000') {this.bus_type = data.bodythis.dataForm.busType = this.bus_type[0].dictValue // 展示第一列的关键this.temporaryVariable = this.bus_type[0].dictValue} else {this.bus_type = []}})

采用以上代码,只能解决第一次新增时会展示 , 第二次点击就没有了。所以最终解决方案:

在你点击新增时,弹框的事件方法中,加上如下代码

this.$nextTick(() => {console.log("点击:" + this.temporaryVariable)this.dataForm.busType = this.temporaryVariable})

关于 this.$nextTick(())方法,我也不知道它能解决,网上找了资料,页面每次渲染有变化时,都会重新渲染,具体不太清楚了,还望前端大佬教教。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。