vue2-级联选择器

最新推荐文章于 2024-08-12 17:02:39 发布
最新推荐文章于 2024-08-12 17:02:39 发布
阅读量855 收藏 9
点赞数 4
文章标签： 前端 java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiuliangliang/article/details/140848089
版权

级联选择器

一、市面上的级联选择器

用多了组件库以后，发现各种级联选择器都有很多问题，用着很不方便

1、比如我有三级，我只能点击我最后一个级别的时候，我的下拉框才会收回，
2、很多组件都没法实现光点击我的一级或者二级菜单，必须要点击最后一级菜单
3、 而且传的值也是一个数组类型的，处理起来要判断，很麻烦，没法我点击一个传递一个ID

所以我根据功能自己写了一个三级下拉框，

二、功能实现

1、数据类型

数据类型为树形结构，我贴上我的数据

dataList: {
        name: '总经理',
        code: 1,
        level: 1,
        isSaleDepartment: false,
        nodes: [
          {
            name: '管理部',
            code: 11,
            level: 2,
            isSaleDepartment: false,
            nodes: [
              {
                name: '人事',
                code: 111,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 8,
              },
              {
                name: '行政',
                code: 112,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 9,
              },
              {
                name: '采购',
                code: 113,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 10,
              },
              {
                name: '仓库',
                code: 114,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 11,
              },
              {
                name: '财务',
                code: 115,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 12,
              },
            ],
            id: 2,
          },
          {
            name: '销售部',
            code: 12,
            level: 2,
            isSaleDepartment: true,
            nodes: [
              {
                name: '销售部门1',
                code: 121,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 13,
              },
              {
                name: '销售部门2',
                code: 122,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 14,
              },
              {
                name: '销售部门3',
                code: 123,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 15,
              },
              {
                name: '销售部门4',
                code: 124,
                level: 3,
                isSaleDepartment: true,
                nodes: [],
                id: 16,
              },
            ],
            id: 3,
          },
          {
            name: '业务部',
            code: 13,
            level: 2,
            isSaleDepartment: false,
            nodes: [
              {
                name: '销售',
                code: 131,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 17,
              },
              {
                name: '市场开发',
                code: 132,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 18,
              },
              {
                name: '售后服务',
                code: 133,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 19,
              },

            ],
            id: 4,
          },
          {
            name: '工程部',
            code: 14,
            level: 2,
            isSaleDepartment: false,
            nodes: [
              {
                name: '新产品开发',
                code: 141,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 20,
              },
              {
                name: '产品设计',
                code: 142,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 21,
              },
              {
                name: '产品工艺',
                code: 143,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 22,
              },
              {
                name: '资料管理',
                code: 144,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 23,
              },


            ],
            id: 5,
          },
          {
            name: '生产部',
            code: 15,
            level: 2,
            isSaleDepartment: false,
            nodes: [
              {
                name: '生产计划',
                code: 151,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 24,
              },
              {
                name: '设备制造',
                code: 152,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 25,
              },
              {
                name: '工程安装',
                code: 153,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 26,
              },

            ],
            id: 6,
          },
          {
            name: '品质部',
            code: 16,
            level: 2,
            isSaleDepartment: false,
            nodes: [
              {
                name: '质量管理',
                code: 161,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 27,
              },
              {
                name: '过程控制',
                code: 162,
                level: 3,
                isSaleDepartment: false,
                nodes: [],
                id: 28,
              },
            ],
            id: 7,
          },
        ],
        id: 1,
      },

2、隐藏下拉框的方法

 hideDropdown() {
      this.showDropdown = false;
      this.currentProvinceName = null;
      this.currentCityName = null;
    },

3、html结构

我是用原生的div和ul以及li标签实现的

 <div class="app">
    <div class="dropdown" @mouseleave="hideDropdown">
      <div
        @click="showDropdown = !showDropdown"
        @mouseenter="showclose = true"
        @mouseleave="showclose = false"
        :style="{ width: widthLength }"
        class="selectContent"
        :class="showDropdown ? 'active' : ''"
      >
        <span style="color: #ccc" v-if="selectedText === '请选择'">{{
          selectedText
        }}</span>
        <span v-else>{{ selectedText }}</span>

        <Icon
          class="icon"
          type="md-close"
          v-if="
            selectedText &&
            selectedText !== '请选择' &&
            showclose &&
            showcloseIcon
          "
          @click.stop="clear"
        />
      </div>

      <ul class="menu" v-if="showDropdown">
        <li
          @click.stop="clickFirst(dataList)"
          @mouseenter="showSubmenu(dataList)"
        >
          {{ dataList.name }}
          <!-- <div class="arrow-down" v-if="dataList.nodes.length > 0"></div> -->
          <!-- <Icon v-if="dataList.nodes.length > 0" type="ios-arrow-forward" /> -->
          <ul
            v-if="
              currentProvinceName === dataList.name && dataList.nodes.length > 0
            "
            class="submenu"
          >
            <li
              class="secondMenu"
              v-for="second in dataList.nodes"
              :key="second.id"
              @click.stop="clickSecond(dataList.name, second)"
              @mouseenter="showSubmenuSecond(second)"
            >
              {{ second.name }}
              <Icon v-if="second.nodes.length > 0" type="ios-arrow-forward" />
              <ul
                v-if="
                  currentCityName === second.name && second.nodes.length > 0
                "
                class="thiredMe"
              >
                <li
                  class="thirdMenu"
                  v-for="third in second.nodes"
                  :key="third.id"
                  @click.stop="selectDistrict(dataList.name, second, third)"
                >
                  {{ third.name }}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

4、CSS代码

<style scoped>
   .arrow-down {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid black;
        }
.app {

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 auto;
}
.active {
  border-color: #57a3f3;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
.icon {
  position: absolute;
  right: 5px;
  font-size: 16px;
}
.selectContent {
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;

  height: 32px;
  padding: 0 24px 0 8px;
  display: flex;
  align-items: center;
}
.selectContent:hover {
  border-color: #57a3f3;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
}
.dropdown {
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 1000;
}
.dropdown .menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 102%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  z-index: 1000;
  width: 100px;
}
.dropdown .menu > li {
  padding: 8px;
  cursor: pointer;
  position: relative;
}
.dropdown .menu > li:hover {
  background: #f3f3f3;
}
.secondMenu {
  padding: 5px;
  position: relative;
}
.secondMenu:hover {
  background: #f3f3f3;
}
.dropdown .submenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: none;
  z-index: 500;
  width: 100px;
  /* max-height: 200px;
  overflow-y: auto; */
  max-height: 200px; /* 设置固定高度 */
}
.thiredMe {
  border: 1px solid #ccc;

  position: absolute;
  left: 100%;
  width: 100px;
  top: 0;
  z-index: 1001;
  background: white;
  border-radius: 5px;
  list-style-type: none;
  height: 150px;
  overflow: auto;
}
.thirdMenu {
  padding: 5px;
  position: relative;

}
.thirdMenu:hover {
  background: #f3f3f3;
}
.dropdown .menu > li:hover > .submenu {
  display: block;
}
ul {
  padding-left: 0 !important;
 }
</style>

5、各个方法代码

methods: {
    showSubmenu(item) {
      this.currentProvinceName = item.name;
      this.currentCityName = null;
    },
    showSubmenuSecond(item) {
      this.currentCityName = item.name;
    },
    hideDropdown() {
      this.showDropdown = false;
      this.currentProvinceName = null;
      this.currentCityName = null;
    },
    // 点击一级菜单
    clickFirst(first) {
      this.$emit('current', first);
      this.selectedText = first.name;
      this.hideDropdown();
    },
    // 点击二级菜单
    clickSecond(firstname, second) {
      this.$emit('current', second);
      this.selectedText = firstname + '-' + second.name;
      this.hideDropdown();
    },
    // 点击三级菜单
    selectDistrict(first, second, third) {
      console.log('firs', first, second.name, third.name);
      this.selectedText = first + '-' + second.name + '-' + third.name;
      this.hideDropdown();
      this.$emit('current', third);
    },
  },

三、实现样式截图

1、一级菜单

1、鼠标放到一级菜单，就显示二级菜单

在这里插入图片描述

2、鼠标点击一级菜单的时候

就直接显示一级的内容，并且下拉框也是隐藏状态
在这里插入图片描述

2、二级菜单

1、鼠标放到二级菜单的时候，显示三级菜单

在这里插入图片描述

2、鼠标点击二级菜单的时候，显示一级菜单和二级菜单

并且下拉框也是隐藏状态
在这里插入图片描述

3、三级菜单

1、鼠标点击三级菜单的时候

直接显示三个菜单的内容，并且下拉框隐藏了，
在这里插入图片描述

李析鸢
关注
vue 联级选择器
qq_42024277的博客
08-17 2513
vue： <el-form-item label="选择地区：" prop="xmwz"> <el-cascader v-model="projectData.xmwz" :props="props"> </el-cascader> </el-form-item> props数据加载 后端传过来的 props: { lazy: true, lazyLoad(node, resolve) {
基于vue20实现的级联选择器
08-12
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联
基于vue2.0实现的级联选择器
01-19
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联 web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况： 单个级联 (下拉选择框，单选) 单个级联 (多项选择) 二级联动 （省份和城市联动） 三级联动 (省市区联动) 在jquery中有很多好用的插件，比如select2, 单选，多选的功能都具备。 本文探讨一下在vue中的实现级联选择器，自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数据逻辑 这种情况是比较推荐的，大量的数据运算放在后端来进行，只需前后端商量好数
使用vuetify开发树状选择框
最新发布
atanming1的博客
08-12 265
使用vuetify开发树状选择框，不用选择框来开发，而是使用v-menu配合输入框和树状图来展示，将其做成组件来使用。
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 6325
以 Vue3选择框（Select）为基础封装的级联选择框组件，支持：禁用；禁用某一级；选择即改变；清除；搜索，自定义搜索过滤函数；自定义样式；自定义字段名；总之，功能丰富，简单易用😁😁
Vue3 手写联级选择面板组件
weixin_43552291的博客
04-10 957
Vue3实现级联面板组件
vue 实现级联选择器功能
清音的博客
04-22 913
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Vue级联选择器
qq_44584476的博客
11-15 3118
1、内:添加级联选择器 2、export内:在data内声明变量options 3、methods内：编写函数将后端返回【或者前端的静态结果res】赋值给options
Vue2级联选择（Cascader）
Mr Dear的博客
12-23 8881
Vue2以 VueAmazingSelect 选择框为基础封装的级联选择框组件。
vue 实现级联选择框
2301_77738160的博客
04-20 817
table2: [['请选择...'],["请选择", "石家庄", "邯郸", "唐山", "张家口", "廊坊"],// table: ["请选择...", "河北省", "辽宁省", "山东省"],['请选择','济南','青岛','枣庄','烟台','东营']],['请选择','沈阳','大连','鞍山','本溪','丹东'],{tab:'请选择...',value:1},value:2}, {tab:'辽宁省',value:3}, {tab:'山东省',{tab:'河北省',
三级联动-级联选择器.zip
04-30
实现三级联动级联选择器的方法有很多种，但常见的是使用JavaScript、jQuery或者现代前端框架如React、Vue或Angular。JavaScript是基础，可以处理DOM操作和事件监听，实现动态数据交互。jQuery简化了JavaScript的一些...
uniapp框架-uniapp选择器,包含一级,二级级联,三级级联uni-app项目源码-vue语法格式.zip
05-21
从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发...
Vue Element Cascader 级联选择器
lmf13992427957的博客
09-28 2824
因为后台返回的最后一级虽然没内容，但是是个空数组，所以会显示空白，通过递归判断是否是空数组，然后设置为undefined即可。方法changeProblemType获取的数据是个数组，若是只想要选择的该级的数据id，通过遍历该数组获取最后一个数值。级联选择器默认只能选择最后一级的，想要选择任意一级，加上属性change-on-select。特性：1.后端返回的数据格式名称跟前端需要的名称不一致：使用:props动态改变。
Vue 学习随笔系列一 -- Cascader 级联选择器
mm_0123456789的博客
03-02 3642
Cascader 级联选择器
vue2+Element-ui中使用级联选择器选择地区
cygqtt的博客
07-18 1404
vue2+Element-ui中使用级联选择器选择地区
vue 实现级联选择器
热门推荐
jasmine0178的博客
06-04 2万+
使用element 的 Cascader 级联选择器 默认 click 触发子菜单 里面的一些属性文档中都有说明。v-model是选中的绑定值。options为可选选项数据源。 在数据中定义v-model的值。options数据源也要定义一下啊 在methods中写入方法 这里面的value和label对应的值要根据后台返回的数据来，例如我这边返回的数据是这样的 根据返回的数据一层层循环...
vue2实现移动端级联选择器
weixin_42230222的博客
02-12 5465
vue2实现的移动端级联选择器，用于多层级数据的选择，典型场景为省市区选择
前端VUE实现级联选择器
weixin_69218754的博客
01-10 1322
前端VUE实现级联选择器
vue3element级联选择器默认值
12-20
在Vue3的Element级联选择器中，可以通过`v-model`指令和`options`属性来设置默认值。 1. 使用`v-model`指令： ```html <el-cascader v-model="value" :options="options" @change="handleChange" /> ``` 在Vue实例中，可以通过`data`选项中的`value`属性来设置默认值。例如： ```javascript data() { return { value: ['guide', 'disciplines', 'consistency'] } } ``` 2. 使用`options`属性： ```html <el-cascader :options="options" @change="handleChange" /> ``` 在Vue实例中，可以通过`data`选项中的`options`属性来设置级联选择器的选项。例如： ```javascript data() { return { options: [ { value: 'guide', label: 'Guide', children: [ { value: 'disciplines', label: 'Disciplines', children: [ { value: 'consistency', label: 'Consistency' } ] } ] } ], value: ['guide', 'disciplines', 'consistency'] } } ``` 以上是两种设置Vue3的Element级联选择器默认值的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值