基于 element-ui 的多选层级菜单，类似于单选菜单， 但是支持多选。
npm install multi-cascader --save
import multiCascader from "multi-cascader";
Vue.use(multiCascader);
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| width | 菜单选择面板的宽度 | String | 220px |
| height | 菜单选择面板的高度 | String | 240px |
| options | 选择器菜单配置项 | Array | [] |
| inputValue | 选择器输入框内显示的内容 | String | -- |
| outputType | 选中项输出的字段名 | String | value |
| disabledPair | 互斥选项对儿 | Object | -- |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
on-selected |
选择器中的某一项被选中的时候触发的事件 | 数组，数组内包含被选中的值 |
配置属性：
| 属性名 | 描述 | 类型 |
|---|---|---|
| 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 用于输出选中选择项对象的某一字段， 默认值： value,
当传入 outputType 为item时， 输出选中这一项的对象(不包括 children 属性)；
disabledPair 用于设置禁用对， 对象形式， 接收两个属性： thisPair thatPair:
disabledPair: {
thisPair: [],
thatPair: []
}thisPair 和 thatPair 这两个数组内的值是互斥的， 例如：
thisPair: [1],
thatPair: [2]
那么， 当值为 1 的选项被选中的时候， 值为 2 的选项将会被禁用掉， 反之亦然。但其他选项的值不会受到影响
除了传递单独的项之外， 还可以单独传入一个 all。
thisPair: [1],
thatPair: ["all"]
传入all 表明thisPair 中的选项 1 是和 选项值中除了 1 之外的所有选项都是互斥的。
- 基本的选项配置
<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"]
}