vue Element 利用Cascader 级联选择器实现三层选择器

最新推荐文章于 2024-09-04 09:32:48 发布

叫我火柴

最新推荐文章于 2024-09-04 09:32:48 发布

阅读量2.4k

点赞数 1

分类专栏： vue 文章标签： vue.js html javascript html5

本文链接：https://blog.csdn.net/weixin_44283571/article/details/109217446

版权

本文介绍了如何使用Vue Element UI中的Cascader组件，特别是动态加载功能，来实现一个三层级联选择器。通过选择省、市、区的流程，详细讲解了在实际开发中此类常见场景的解决办法，提供了相关代码示例，增强了用户体验。

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

在这次项目需求中要实现的功能和选择地址的过程是很相似的，就用选择地址的过程来举例：首先是选择省，然后是市，再是某个区。在实际的开发过程中这种场景是很常见的，所以我就分享一下我的实现过程。

效果图
在这里插入图片描述

实现过程

实现这个功能需要用到Element这个框架中的Cascader 级联选择器，但是不是那个Cascader 级联选择器都适用于这种场景，其中我选择了Cascader 级联选择器中的动态加载选择器，链接 --> 添加链接描述
这个选择器的好处就像你看到的那样它可以：动态加载，这也就意味着可以把我们的数据动态的接入到选择器当中，体验就很好。

代码

HTML:

<el-cascader
  ref="cascader"
  :props="casProps"
  style="width:300px"
  filterable
  :options="projectAllList"
  clearable
  @change="handleChange">
</el-cascader>

JS:

data () {
   
    return {
   
      projectAllList: [{
   
        projectId: '',
        projectName: '',
        name:''
      }],
      casProps: {
   
        value: 'projectId',
        label: 'projectName',
        lazy: true, // 此处必须为true
        lazyLoad: (node, resolve) => {
   
          <