el-cascader级联选择器

最新推荐文章于 2023-11-22 22:45:22 发布

一个入门级的程序猿

最新推荐文章于 2023-11-22 22:45:22 发布

阅读量597

点赞数

分类专栏：总结文章标签： elementui vue

本文链接：https://blog.csdn.net/yalinyang/article/details/115773201

版权

总结专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了在Vue+ElementUI中如何动态实现el-cascader组件，并展示了在遇到级联选择器联动时可能出现的问题及解决方案。通过设置默认值避免空白显示，通过设置key值解决切换时的错误。提供了一段包含模板插槽的代码示例，以及在tab切换时更新key值的方法，帮助开发者避免常见错误。

摘要由CSDN通过智能技术生成

vue+element ui中动态实现 el-cascader级联选择器

实现效果图

在这里插入图片描述

项目代码

<el-cascader
   v-model="value"
   :options="transSubjectList"
   size="mini">
   <template slot-scope="{data }" >
     <span @click="handleChange(data, 'click',)">{{ data.label }}</span>
   </template>
   </el-cascader>

总结

设置默认值，

data () {
  return {
	value: ['self'],
	transSubjectList: [{
        level_type: 'self',
        pk: 0,
        value: 'self',
        label: '本人',
        childrens: undefined
      }]
 }
}

第一个本人没有 children，为了不显示空白的子集类似下图这个样子

需将子集的children 设为undefined
设置完效果如下图所示
当有两个或者多个联动选择器的时候，来回切换会报错
会出现Cannot read property ‘level’ of null的错误
这是因为没有设置key值，导致来回切换的时候，会关联之前的数据，找不到之前的元素，所以应该设置一个key值，在 tab切换的时候，设置不同的key值。

 <el-cascader
   v-model="value"
   :options="transSubjectList"
   :key="cascaderKey"
   size="mini">
   <template slot-scope="{data }" >
   	 <span @click="handleChange(data, 'click',)">{{ data.label }}</span>
    </template>
 </el-cascader>
 data() {
 return {
   cascaderKey: 0
 }
 }