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

原创已于 2023-07-19 14:50:04 修改 · 置顶 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端框架 #javascript

于 2022-04-26 14:21:57 首次发布

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

element

3 篇文章

订阅专栏

本文介绍了在Vue中使用级联选择器（Cascader）时遇到的回显问题，即当级联选项过多时，数据无法正确回显。问题的根本原因是数据不一致导致组件无法更新。解决方案包括使用`v-if`（可能导致闪烁）和添加`key`属性以触发重新渲染。通过在`el-cascader`组件上添加`:key`属性并结合`modalKey`变量，可以确保每次点击时组件都能正确更新，从而解决回显问题。

正常定位样式:

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

上代码：

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

这样就解决了