正常定位样式:
前提:当级联太多时候就会出现回显问题,一两个倒没什么问题
上代码:
<template>
<el-form
:model="ruleForm"
ref="ruleForm"
label-width="100px"
>
<el-form-item label="工种类型:" prop="workTypeId">
<el-cascader
filterable
:show-all-levels="false"
placeholder="请选择工种类型"
clearable
style="width:80%"
:props="props"
v-model="ruleForm.workTypeId"
:options="worksTypes"
></el-cascader>
</el-form-item>
</el-form>
</template>
<script>
export default{
data () {
return {
props: {
value: 'id',
label: 'label',
children: 'children'
},
ruleForm:{
workTypeId:[],
},
worksTypes:[],
}
},
mounted(){
this.getTypes()
this.getValue()
},
methods:{
//获取值
getValue(){
this.axios.get('api').then(function (response) {
console.log(response);
this.ruleForm.workTypeId = response
this.modalKey = this.modalKey+1
})
.catch(function (error) {
console.log(error);
});
},
//获取筛选项值
getTypes(){
this.axios.get('api').then(function (response) {
console.log(response);
this.worksTypes = response
})
.catch(function (error) {
console.log(error);
});
}
},
</script>
图片:定位时准时不准
出现这种情况无法回显根本原因:就是数据不一样无法更新
有两种解决方法:
第一种就是用v-if方法,但这种会导致刚点击弹窗的时候那一栏会突然显示问题所以不推荐
第二总就是给它加个key,让每一次点击都能重新渲染
代码:
<template>
<el-form
:model="ruleForm"
ref="ruleForm"
label-width="100px"
>
<el-form-item label="工种类型:" prop="workTypeId">
<el-cascader
:key="modalKey"
filterable
:show-all-levels="false"
placeholder="请选择工种类型"
clearable
style="width:80%"
:props="props"
v-model="ruleForm.workTypeId"
:options="worksTypes"
></el-cascader>
</el-form-item>
</el-form>
</template>
<script>
export default{
data () {
return {
props: {
value: 'id',
label: 'label',
children: 'children'
},
modalKey:0, //key
ruleForm:{
workTypeId:[],
},
worksTypes:[],
}
},
mounted(){
this.getTypes()
this.getValue()
},
methods:{
//获取值
getValue(){
this.axios.get('api').then(function (response) {
console.log(response);
this.ruleForm.workTypeId = response
this.modalKey = this.modalKey+1
})
.catch(function (error) {
console.log(error);
});
},
//获取筛选项里的值
getTypes(){
this.axios.get('api').then(function (response) {
console.log(response);
this.worksTypes = response
})
.catch(function (error) {
console.log(error);
});
}
},
</script>
这样就解决了