vue层级选择器多选

柔情只为你懂 2024-04-18 22:14 68阅读 0赞

来了一个需求，需要层级多选器，二级需要多选，自己造的时候花了半天没造出来，给的时间有限呀，确实不好造，造了一半很多bug。结果google一把发现有一个开源的，写的挺不错的，所以将此番分享，真的节约了很多时间，毕竟公司就我一个人呀~

分享他人封装的插件如下~ 结合element一致

1.  层级选取器之多选，如图，基于element-ui的级联多选选择器，友好显示下拉箭头，样式与element一致，支持多选与级联选择器的大部分功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70][]

# **install 安装** #

npm i el-cascader-multi --save
    或
    cnpm i el-cascader-multi --save

在main.js中写入下面的代码

import elCascaderMulti from "el-cascader-multi";
    Vue.use(elCascaderMulti);

接下来，你就可以在页面中使用cascader-multi了

<template>
        <el-cascader-multi v-model="checkList" :data="data"> </el-cascader-multi>
    </template>
    <script>
        export default {
            data () {
                return {
                    data: [], // 与element级联选择器格式一致
                    checkList: []
                }
            }
        }
    </script>

推荐看这个gitHub有详细说明：[https://github.com/Charming2015/el-cascader-multi][https_github.com_Charming2015_el-cascader-multi]

**我的代码如下：**

**main中引入后，在组件中引入**这个代码

<el-cascader-multi
              v-model="checkList"
              :data="Adata"
              @change="change"
              value-key="id"
              label-key="label"
              :only-last="true"
              :children-key="children"
            ></el-cascader-multi>

在@change方法下再编译需要传的参数

change() {
          this.objList = [];
          let obj = {
            code: "",
            id: "",
            label: ""
          };
          let that = this;
          this.checkList.forEach(itemA => {
            that.Adata.forEach(item => {
              if (itemA[0] == item.id) {
                obj.id = itemA[1];
                item.children.forEach(itemB => {
                  if (obj.id == itemB.id) {
                    obj.code = item.code;
                    obj.label = itemB.label;
                    that.objList.push(Object.assign({}, obj));
                  }
                });
    
                console.log(that.objList);
              }
            });
          });
          // this.checkList = this.checkList;
          // console.log(this.checkList);
        },

对数据进行处理后，传参的数据如下

![20190912161650690.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM3Mzg3NQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/22b50dc33ee5440185c4d454e760a2ba.png
[https_github.com_Charming2015_el-cascader-multi]: https://github.com/Charming2015/el-cascader-multi
[20190912161650690.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/58ff1d2bc84d4b3d90d1d5bb0d3e3279.png