vue层级选择器多选

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

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

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

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

我的代码如下：

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);
    },

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

以上是 vue层级选择器多选 的全部内容， 来源链接： utcz.com/z/376689.html

回到顶部