yepingping / multi-cascader

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, 当传入 outputType 为item时， 输出选中这一项的对象(不包括 children 属性)；

disabledPair

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

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

thisPair 和 thatPair 这两个数组内的值是互斥的， 例如：

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"]
}