multi-cascader

基于 element-ui 的多选层级菜单,类似于单选菜单, 但是支持多选。

how to install

npm install multi-cascader --save

how to use

import multiCascader from "multi-cascader";

Vue.use(multiCascader);

页面预览

attributes

属性名 描述 类型 默认值
width 菜单选择面板的宽度 String 220px
height 菜单选择面板的高度 String 240px
options 选择器菜单配置项 Array []
inputValue 选择器输入框内显示的内容 String --
outputType 选中项输出的字段名 String value
disabledPair 互斥选项对儿 Object --
事件名称 说明 回调参数
on-selected 选择器中的某一项被选中的时候触发的事件 数组,数组内包含被选中的值

attributes details

options 菜单配置

配置属性:

属性名 描述 类型
value 选项的值 String or Number
label 选项的名称 String
checked 该选项是否被选中 Boolean
children 如果存在下一级菜单,是属于该选项的下一级选项值, 非必须 Array

示例:

options: [{
    value: "1",
    label: "一级菜单",
    checked: false,
    children: [
        {
            value: 11,
            checked: false,
            label: "二级菜单",
            children: [
                {
                    value: "21",
                    checked: false,
                    label: "三级菜单1"
                },
                {
                    value: "22",
                    checked: false,
                    label: "三级菜单2"
                }
            ]
        },
        {
            value: "12",
            checked: false,
            label: "二级菜单"
        }
]

outputType

outputType 用于输出选中选择项对象的某一字段, 默认值: value, 当传入 outputTypeitem时, 输出选中这一项的对象(不包括 children 属性);

disabledPair

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

disabledPair: {
  thisPair: [],
  thatPair: []
}

thisPairthatPair 这两个数组内的值是互斥的, 例如:

thisPair: [1],
thatPair: [2]

那么, 当值为 1 的选项被选中的时候, 值为 2 的选项将会被禁用掉, 反之亦然。但其他选项的值不会受到影响 除了传递单独的项之外, 还可以单独传入一个 all

thisPair: [1],
thatPair: ["all"]

传入all 表明thisPair 中的选项 1 是和 选项值中除了 1 之外的所有选项都是互斥的。

demos

  • 基本的选项配置

<multiCascader width="240px" height="220px" :options="configOptions" @on-selected="getSelected" :inputValue="configTips"></multiCascader>
configOptions: [{
    value: "1",
    label: "一级菜单",
    checked: false,
    children: [
        {
            value: "11",
            checked: false,
            label: "二级菜单"
        },
        {
            value: "12",
            checked: false,
            label: "二级菜单"
        }
]}
...
getSelected(val) {
    this.selectGroups = val;
    this.configTips = `已选择${val.length}个分组`;
},
console.log(this.selectGroups); // ["11"]
  • 设置规定输出值得类型

使用outputType 可以输出选中项对象除children之外的任何属性

<multiCascader width="240px" height="220px" :options="configOptions" @on-selected="getSelected" :inputValue="configTips" outputType="label"></multiCascader>
...
console.log(this.selectGroups); // ["二级菜单"]

特别, 当 outputType 属性设为 item 的时候, 可以输出当前选中项的对象

<multiCascader width="240px" height="220px" :options="configOptions" @on-selected="getSelected" :inputValue="configTips" outputType="item"></multiCascader>
...
console.log(this.selectGroups); // [{ label: "二级菜单", value: "21", checked: false }]
  • 设置禁用选项对
<multiCascader width="240px" height="220px" :options="configOptions" @on-selected="getSelected" :inputValue="configTips" ></multiCascader>
disabledPair: {
    thisPair: ["1"],
    thatPair: ["2"]
},
configOptions: [{
    value: "1",
    label: "一级菜单",
    checked: false,
    children: [
        {
            value: "11",
            checked: false,
            label: "二级菜单"
        },
        {
            value: "12",
            checked: false,
            label: "二级菜单"
        }]
    },
    {
        value: "2",
        checked: false,
        label: "一级菜单(2)"
    },
    {
        value: "3",
        checked: false,
        label: "一级菜单(3)"
    }
]
  • 设置某一选项和其他之外的所有选择均互斥的效果
disabledPair: {
    thisPair: ["1"],
    thatPair: ["all"]
}