Cascader 级联选择器定位问题解决

正常定位样式:

 前提：当级联太多时候就会出现回显问题，一两个倒没什么问题

上代码：

 <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>

这样就解决了