重大更新

最新版本的element已经有级联多选功能了

前沿

吐槽一下，程序猿最不愿听到的话之一，（人家某某网站就做出来了，你怎么做不出来，简直丧心病狂）小编最近一直在开发基于vue-elementui的pc端项目，就碰到了来自产品的这句话，都有种拿起显示器了。不过吐槽归吐槽，项目还是要写的。。。。。。在本项目中产品提的一个需求，就是人家某某网站上有的，而element-ui上没有，那就是Cascader 级联选择器，element-ui只支持单选，于是就开始了折腾，再折腾了快一周的时间吧，还是没搞出来，最后由于项目着急上线，只能暂时先放弃，所以就先搁置了，后来幸得于空，于是乎又是开始折腾，毕竟也是自己的问题。哎，不说了，show time.

该多选菜单基于 element-ui 的Cascader 层级菜单， 但是在我的一番折腾下开发出一套支持多选的，有禁用状态，以及灵活控制选几个，适应产品的奇葩需求，Cascader 层级菜单。羞于一提的是，我折腾了整整3天，才搞出来。在这里把我的心路历程记录下来,里边的注释写的个人感觉都挺全的，有不明白的也可以与我交流，共同探讨，方便后续学习与扩展。
先上个效果图

微信图片_20181012184700.png

现附上该插件的菜单配置项，以方便后期维护

attributes属性说明

事件名称

options 菜单配置，就是完全按照elementui Cascader 的options的格式

再简单介绍一下disabledPair属性

disabledPair 用于设置禁用对， 对象形式， 接收两个属性： thisPair thatPair:

disabledPair: {
thisPair: [1], //这里的1是value的值
thatPair: [2]，
}
那么， 当值为 1 的选项被选中的时候， 值为 2 的选项将会被禁用掉， 反之亦然。但其他选项的值不会受到影响 除了传递单独的项之外， 还可以单独传入一个 all。

disabledPair: {
thisPair: [1],
thatPair: ["all"]
}

首先，先建一个公共的文件夹MulitileCascader,里边包含有三个自己封装的文件

一，index.vue 此页面为主要出口文件，会发射出一个得到选中后的item的方法以及数组。

<template>
  <span class="dropTreeLists">
    <span class="benchmark">基准&nbsp;:</span>
    <multiCascader :options="configOptions"
                   @on-selected="getSelected"
                   :inputValue="configTips"></multiCascader>
  </span>
</template>
   <script>
import multiCascader from "./MulCheckCascader.vue";
//这个也是我们项目的接口，不必纠结，倒是换位自己的接口就好了
import { getlistBenchmark } from "@/api/basicManage";
export default {
  components: {
    multiCascader
  },
  data() {
    return {
      configTips: "请选择基准",
      //模板勿删
      configOptions: [
        {
          value: "1",
          label: "一级菜单",
          checked: false,  //控制是否默认选中
          multiple: false,   //是否多选   false为该一级菜单不多选，true表示多选
          children: [
            {
              value: 11,
              checked: false,
              multiple: false,
              disabled:true,    //是否禁用
               label: "二级菜单",
              children: [
                {
                  value: "21",
                  checked: false,
                  multiple: false,   //是否多选   false为该一级菜单不多选，true表示多选
                  disabled :true,    //是否禁用
                  label: "三级菜单1"
                },
                {
                  value: "22",
                  checked: false,
                  label: "三级菜单2"
                }
              ]
            },
            {
              value: "12",
              checked: false,
              multiple: false,
              label: "二级菜单",
              children: [
                {
                  value: "399300",
                  checked: true,
                  label: "三级菜单复制"
                },
                {
                  value: "399300",
                  checked: false,
                  label: "三级菜单"
                }
              ]
            }
          ]
        }
      ],
      commonLength: ""
    };
  },
  mounted() {
    this.MulitGetlistBenchmark(); //多选
  },
  methods: {
    // 点击每一个item的时候的操作   在这个方法内灵活判断多选的状态以及禁用状态
    getSelected(val) {
      let strnum = val.length;
      console.log(val);
      // 当选中的指数大于1并且小于10的时候让所有的指数都可以选择（没有禁用状态）
      if (val.length > 1 && val.length < 10) {
        this.LessThanThen(this.configOptions);
      }
      // 必须保留一个选中的
      if (val.length == 1) {
        let moreOne = val[0];
        this.LessThanMoreOne(this.configOptions, moreOne);
      }
      // 当选中的指数大于10的时候让除选中的之外的指数都变为禁用状态
      if (val.length >= 10) {
        let moreOne = val;
        this.LessThanMoreTen(this.configOptions, moreOne);
      }
      if (strnum !== this.commonLength) {
//将选中后的数组暴漏出去，在需要的页面使用
        this.$emit("CheckedsIndexCodes", val);
      }
      this.commonLength = val.length;
      // 勿删后期需求改变会用
      // this.selectGroups = val;
      // this.configTips = `已选择${val.length}个分组`;
    },
    // 此递归为当选中的指数大于10的时候让除选中的之外的指数都变为禁用状态
    LessThanMoreTen(datas, moreOne) {
      for (var i in datas) {
        if (datas[i].multiple !== false) {
          // console.log(datas[i]);
          datas[i].disabled = true;
          for (let d = 0; d < moreOne.length; d++) {
            if (datas[i].value == moreOne[d]) {
              datas[i].disabled = false;
            }
          }
        } else {
          this.LessThanMoreTen(datas[i].children, moreOne);
        }
      }
    },
    // 此递归为当选中的为选中的只剩下一个的时候禁止取消，也就是必须保留一个选中的
    LessThanMoreOne(datas, moreOne) {
      for (var i in datas) {
        if (datas[i].multiple !== false) {
          // console.log(datas[i]);
          if (datas[i].value == moreOne) {
            datas[i].disabled = true;
          }
        } else {
          this.LessThanMoreOne(datas[i].children, moreOne);
        }
      }
    },
    // 此递归为当选中的为  满足该条件时(val.length > 1 && val.length < 10)  所有的item的都可以选则
    LessThanThen(datas) {
      for (var i in datas) {
        if (datas[i].multiple !== false) {
          // console.log(datas[i]);
          datas[i].disabled = false;
        } else {
          this.LessThanThen(datas[i].children);
        }
      }
    },
    // 此递归为初始化时默认选中沪深300，由于只有一个所以禁用沪深300
    getArrayList(datas) {
      for (var i in datas) {
        if (datas[i].multiple !== false) {
          // console.log(datas[i]);
          datas[i].disabled = false;
          if (datas[i].value === "399300") {
            datas[i].disabled = true;
            datas[i].checked = true;
          }
        } else {
          // console.log(datas[i]);
          //每次在传入父节点的childreg去查找，自己调用自己的方法
          this.getArrayList(datas[i].children);
        }
      }
    },
    MulitGetlistBenchmark() {
//此接口为我们项目中的接口，上边有数据模板，可根据数据模板来写数据。
      getlistBenchmark({}).then(response => {
        this.configOptions = response.data.data;
        this.getArrayList(this.configOptions);
      });
    }
  }
};
</script>
   
   <style lang="scss" scoped>
.benchmark {
  font-size: 14px;
}
</style>

二，MulCheckCascader.vue //此页面为基础模板，会在该页面引用递归出来的多选的item的字模板，并且该页面会接受引用页面传过来的数据，方便灵活控制尺寸，数据，是否禁用等的状态。

<template lang='html'>
    <div class='multil-cascader'>
        <el-popover placement="top-start" popper-class="multi-cascader-popover" :visible-arrow="showArrow" trigger="click" @hide="whenPopoverHide" @show="whenPopoverShow">
            <muContent
                :height="height"
                :width="width"
                :option="options"
                @handleOutPut="whenOutPut"
                :selectedValues="selectedValues"
                :outputType="outputType"
                :disabledPair="disabledPair">
            </muContent>
            <el-input popper-class="slect-panel" v-if="activeItem[0] && activeItem[0].level === 0"  v-model="inputValue" readonly slot="reference" :suffix-icon="inputArrow"/>
        </el-popover>
    </div>
</template>

<script>
import muContent from "./multiContent";
export default {
    name: "multiCascader",
    props: {
        options: {
            type: Array,
            default() {
                return [];
            }
        },
        width: {
            type: String,
            default: ""
        },
        height: {
            type: String,
            default: ""
        },
        inputValue: {
            type: String,
            default() {
                return "";
            }
        },
        // 输出值的类型
        outputType: {
            type: String,
            default() {
                return "value";
            }
        },
        // 互斥对儿
        disabledPair: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            // 被选中的值
            selectedValues: [],
            showArrow: true,
            activeItem: [],
            outputValue: [],
            optionDicts: [],
            inputArrow: "el-icon-arrow-down",
            popoverWidth: "",
            // 展开之后的数组， 将每一个children 展开
            flatOptions: []
        };
    },
    watch: {
        "options": function () {
            this.initData();
        }
    },
    components: {
        muContent
    },
    created() {
        this.initData();
        this.setOptionDicts(this.options);
        this.toFlatOption(this.options);
    },
    methods: {
        whenPopoverHide() {
            this.inputArrow = "el-icon-arrow-down";
        },
        whenPopoverShow() {
            this.inputArrow = "el-icon-arrow-up";
        },
        // 初始化数据 对于每一项 options 添加相关字段并且获取到当前被点击到的元素
        initData() {
            this.setLevel();
            const { width, height } = this;
            const checkedValues = [];
            let childrenValues = [];
            const getChecked = (item) => {
                const { checked, value, children, level, siblingValues } = item;
                if (siblingValues) {
                    const tempValues = [...siblingValues];
                    item.siblingValues = tempValues;
                }
                childrenValues.push(value);
                if (children && children.length > 0) {
                    children.forEach(child => {
                        getChecked(child);
                    });
                } else {
                    if (checked && item[this.outputType]) checkedValues.push(item[this.outputType]);
                }
            };
            this.activeItem = this.options;            
            this.options.forEach(child => {
                getChecked(child);
                // 设置当前item 的 childrenValues, 包含当前item 下的所有值的 value
                child.childrenValues = [...childrenValues];
                childrenValues = [];
            });
            this.selectedValues = checkedValues;
            this.whenOutPut(this.selectedValues);
        },
        getTypeOptions(values, outputType) {
            const outputValues = [...values];
            const finalOutputArr = [];
            return this.flatOptions.reduce((pev, cur) => {
                const { value: curVal } = cur;
                if (outputType === "item") {
                    if (outputValues.includes(curVal)) pev.push(cur);
                } else {
                    if (outputValues.includes(curVal) && cur[outputType]) pev.push(cur[outputType]);
                }
                return pev;
            }, []);
        },
        // 展开配置中的各项， [{}], 排除 children 属性
        toFlatOption(option) {
            const getItems = (arr, cur) => {
                const keys = Object.keys(cur);
                const newObj = {};
                const curChild = cur.children;
                const hasChild = curChild && curChild.length > 0;          
                keys.forEach(key => key !== "children" && (newObj[key] = cur[key]));
                arr.push(newObj);
                return (hasChild ? curChild.reduce(getItems, arr) : arr);
            };
            this.flatOptions = option.reduce(getItems, []);
        },
        // 设置配置的字典
        setOptionDicts(options) {
            if (!Array.isArray(options)) {
                const { label, value } = options;
                this.optionDicts.push({ value, label });
                const children = options.children;
                if (children) {
                    this.setOptionDicts(children);
                }
            } else {
                options.forEach(opt => {
                    this.setOptionDicts(opt);
                });
            }
        },
        // 触发 on-selected 事件
        whenOutPut(value) {
            // 根据选中的值数组 value 输出特定 outputType 类型
            if (this.outputType !== "value") {
                this.outputValue = this.getTypeOptions(value, this.outputType);
            } else {
                this.outputValue = value;
            }
            this.$emit("on-selected", this.outputValue);
        },
        // 设定层级
        setLevel() {
            const siblingValues = [];
            let tempLevel = 0;
            if (this.options.length) {
                const addLevel = option => {
                    const optChild = option.children;
                    if (option.level === tempLevel) {
                        siblingValues.push(option.value);
                    }
                    if (optChild) {
                        optChild.forEach(opt => {
                            opt.level = option.level + 1;
                            addLevel(opt);
                        });
                    }
                };
                this.options.forEach(option => {
                    if (!option.level) {
                        option.level = 0;
                        tempLevel = option.level;
                    }
                    addLevel(option);
                    option.siblingValues = siblingValues;
                });
            }
        },
        showSecondLevel(item) {
            this.activeItem = item;
        }
    }
};
</script>
<style lang='scss' scoped>
.vk-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
    padding: 8px 20px;
    font-size: 14px;
    width: 100%;
    &:hover {
        background-color: rgba(125,139,169,.1);
    }
}
.multil-cascader{
    width: 155px;
    display: inline;
}
.multil-cascader:hover{
    cursor: pointer;
}

</style>

三，multiContent.vue 该页面为递归的所有children的Li的显示，以及选中点击事件

<template lang="html">
    <div class="popver-content">
        <div class="multiCascader-multil-content" :style="contentStyle">
            <ul class="multiCascader-multi-menu">
                <li v-for="(item, index) of option"
                    :key="index"
                    style="border:1px solid transparent;"
                    :class="[ 'multiCascader-menu-item', { 'item-disabled': item.disabled }]"
                    @click="showNextLevel(item)">
                    <el-checkbox v-if="item.multiple != false" :disabled="item.disabled" v-model="item.checked" @change="checkChange(item)">{{ item.label }}</el-checkbox>
                    <span v-else>{{ item.label }}</span>
                    <i class="el-icon-arrow-right" v-show="item.children && item.children.length > 0"></i>
                </li>
            </ul>
        </div>
        <!-- 递归调用自身组件 -->
        <muContent
            @handleSelect="whenSelected"
            :height="height"
            :width="width"
            v-if="(activeItem && activeItem.children) && (activeItem.children.length > 0)"
            :selectedValues="selectedValues"
            @handleOutPut="whenOutPut"
            :disabledPair="disabledPair"
            :option="activeItem.children" >
        </muContent>
    </div>
</template>

<script>
const vm = this;
import Vue from "vue";
export default {
  name: "muContent",
  props: {
    option: {
      type: Array,
      default() {
        return [];
      }
    },
    // 被选中的值
    selectedValues: {
      type: Array,
      default() {
        return [];
      }
    },
    // 设置的宽度
    width: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    },
    // 禁用字段
    disabledPair: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      activeItem: "",
      tempActiveItem: "",
      contentStyle: {
        width: "",
        height: ""
      },
      checkArr: [],
      checkDisabled: false
    };
  },
  created() {
    this.initData();
    this.whenOutPut(this.selectedValues);
  },
  methods: {
    // 逐级上传
    whenOutPut(val) {
      this.$emit("handleOutPut", val);
    },
    initData() {
      const { width, height } = this;
      this.contentStyle = Object.assign({}, this.contentStyle, {
        width,
        height
      });
    },
    // 获取到选中的值
    checkChange(item) {
      const getCheckedItems = item => {
        const { value, checked, level } = item;
        if (checked && level) {
          this.selectedValues.push(value);
        } else if (!checked) {
          item.disabled = false;
          if (this.selectedValues.includes(value)) {
            this.selectedValues.splice(
              this.selectedValues.findIndex(slectVal => slectVal === value),
              1
            );
          }
        }
        const itemChild = item.children;
        if (itemChild) {
          itemChild.forEach(child => (child.checked = checked));
        }
      };

      this.recursiveFn(item, getCheckedItems);
      this.disabeldAction(item);
      this.activeItem = item;
      this.$emit("handleSelect", this.option);
      this.$emit("handleOutPut", this.selectedValues);
    },
    // 当二级菜单改变的时候
    whenSelected(val) {
      let allChildCancelChecked = true;
      if (Array.isArray(val) && val.length > 0) {
        allChildCancelChecked = val.every(child => child.checked === false);
      }
      this.activeItem.checked = !allChildCancelChecked;
      this.disabeldAction(this.activeItem);
      this.$emit("handleSelect", this.option);
    },
    // 递归函数
    recursiveFn(curItem, cb) {
      cb(curItem);
      const children = curItem.children;
      if (children && children.length > 0) {
        children.forEach(item => {
          this.recursiveFn(item, cb);
        });
      }
    },
    // 设置 disabled 值 values: 互斥的另一方数组， curItem 当前选中的值
    setDisabled(exceptValues, curItem, values) {
      const {
        checked: curChecked,
        childrenValues,
        value: curValue,
        siblingValues
      } = curItem;
      this.checkArr = [];
      if (values.includes("all")) {
        if (siblingValues) {
          this.checkArr = new Array(
            siblingValues.length - exceptValues.length
          ).fill(true);
        }
      } else {
        this.checkArr = new Array(values.length).fill(true);
      }
      const getCheckArr = item => {
        const { value, checked } = item;
        if (!exceptValues.includes(value)) return;
        this.checkArr.push(checked);
        this.checkArr.shift();
      };
      const resetDistable = child => {
        if (!values.includes(child.value)) return;
        child.disabled = this.checkArr.some(val => val === true);
      };
      this.option.forEach(opt => {
        this.recursiveFn(opt, getCheckArr);
      });
      this.option.forEach(opt => {
        this.recursiveFn(opt, resetDistable);
      });
    },
    // disabled action
    // 根据选中的值进行设置是否可选
    disabeldAction(item) {
      const { thatPair, thisPair } = this.disabledPair;
      if (!thatPair || !thisPair) {
        return;
      }
      const pairs = [...thatPair, ...thisPair];
      const { value: itemVal } = item;
      const belongPair = pairs.includes(itemVal) || pairs.includes("all");
      let distableValues = [];
      let ableValues = [];
      if (!belongPair) return;
      if (
        thisPair.includes(item.value) ||
        (thisPair.includes("all") && !thatPair.includes(item.value))
      ) {
        this.setDisabled(thisPair, item, thatPair);
        return;
      }
      if (
        thatPair.includes(item.value) ||
        (thatPair.includes("all") && !thisPair.includes(item.value))
      ) {
        this.setDisabled(thatPair, item, thisPair);
      }
      this.$emit("handleSelect", this.option);
      this.disabeldAction(this.activeItem);
    },
    // 设置 disabled 值 values: 互斥的另一方数组， curItem 当前选中的值
    setDisabled(exceptValues, curItem, values) {
      const {
        checked: curChecked,
        childrenValues,
        value: curValue,
        siblingValues
      } = curItem;
      this.checkArr = [];
      if (values.includes("all")) {
        if (siblingValues) {
          this.checkArr = new Array(
            siblingValues.length - exceptValues.length
          ).fill(true);
        }
      } else {
        this.checkArr = new Array(values.length).fill(true);
      }
      const toDisabled = item => {
        const { value, checked } = item;
        if (
          values.includes(value) ||
          (values.includes("all") && !exceptValues.includes(value))
        ) {
          if (siblingValues && siblingValues.includes(value)) {
            this.checkArr.push(checked);
            this.checkArr.shift();
          }
        }
        const itemChild = item.children;
        if (itemChild && itemChild.length > 0) {
          itemChild.forEach(child => {
            toDisabled(child);
          });
        }
      };
      this.option.forEach(child => {
        toDisabled(child);
      });
      this.option.forEach(child => {
        if (
          exceptValues.includes(child.value) ||
          (exceptValues.includes("all") && !values.includes(child.value))
        ) {
          child.disabled = this.checkArr.some(val => val === true);
        }
      });
    },
    // disabled action
    // 根据选中的值进行设置是否可选
    disabeldAction(item) {
      const { thatPair, thisPair } = this.disabledPair;
      if (!thatPair || !thisPair) {
        return;
      }
      const pairs = [...thatPair, ...thisPair];
      if (pairs.includes(item.value) || pairs.includes("all")) {
        if (
          thisPair.includes(item.value) ||
          (thisPair.includes("all") && !thatPair.includes(item.value))
        ) {
          this.setDisabled(thatPair, item, thisPair);
          return;
        }
        if (
          thatPair.includes(item.value) ||
          (thatPair.includes("all") && !thisPair.includes(item.value))
        ) {
          this.setDisabled(thisPair, item, thatPair);
        }
      }
    },
    //点击每一个列表的操作并且给下一个列表赋值
    showNextLevel(item) {
        //先清空，后赋值，否则会导致多级列表同时存在
      this.activeItem = "";
      if (item.disabled) return;
      setTimeout(() => {
        this.activeItem = item;
      }, 10);
    }
  }
};
</script>
<style lang='scss' scoped>
.popver-content {
  display: flex;
  justify-content: space-between;
}
.multiCascader-multil-content {
  display: inline-block;
  max-height: 250px;
  overflow-y: auto;
  // border-right: 1px solid red;

}
.multiCascader-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  outline: none;
  padding: 8px 20px;
  font-size: 14px;
  &:hover {
    background-color: rgba(125, 139, 169, 0.1);
  }
}
.item-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>

接下来就到需要引用的页面了。

<template>
  <div class="performanceBox">
          <!-- 级联选择器多选 -->
          <choiceindex v-on:CheckedsIndexCodes="FromTreeCheckeds"></choiceindex>
  </div>
</template>
<script>
引用上边创建的MultipleChoice文件夹下的index出口文件就好了。
import choiceindex from "@/components/MultipleChoice/index"; //级联选择多选 完成
export default {
  components: {
    choiceindex,
  },
  data() {
    return {
      SaveCascadeIndexCodes: [], //保存级联选择器多选的基准code
      SaveJiZhunParams: [], //保存业绩表现需要的参数

    };
  },
  methods: {
    //多选选择基准时的code
    FromTreeCheckeds(IndexCodes) {
//IndexCodes就是选中的item的数组，操作他就好了
      // console.log(IndexCodes);
      this.SaveCascadeIndexCodes = IndexCodes;
    },
  }
};
</script>
<style  rel="stylesheet/scss" lang="scss">
</style>

结束语

这个插件到此也就完成了，终于解决了这个深坑，希望能帮助到小伙伴们，有什么不足的大家多多提出宝贵的意见，共同探讨，进步。