由于
elementUI的级联选择器暂不支持多选，因此基于elementUI开发此组件，所有的样式class都是使用elementUI原样式，基本可无副作用的引入项目使用，有任何问题欢迎发布issue，我会在看到第一时间回复大家。 如果觉得组件还不错的话 不要吝啬你的star哦~
TIP：当前包基于 elementUI 2.4.11 开发，安装之后很有可能出现与使用的版本不兼容的情况，由于版本更新频繁加上搬砖任务繁重，没法为每个版本做兼容。强烈建议大家直接Copy源码食用，可随意做样式修改，源码结构比较简单，修改无需太多成本 : )
- 由于IE的兼容性问题比较复杂，需要结合 babel 相关插件实现，并且打包出来体积会比较大，所以 dist 文件中的包没有兼容 IE，需要兼容 IE 可以拷贝源码放入具备兼容插件的环境中打包实现
- 修复动态加载中错误警告导致子集无法展开的问题 #41 #47
- 修复选项面板宽度无法自定义/自适应问题 #44 #46
- 新增
panelWidth<Number | String>选项控制层级面板宽度。- Number - 默认 180
- String - 只可设置唯一值
auto，面板会根据内容自动撑开。但不建议这么做，因为数据的长度是未知的。
- 采用了umd打包方式，项目中需要单独引用
import "ele-multi-cascader/dist/cascader.css"。
- 新增
clearable选项，控制清除全部已选项，同elementUI#30 - 新增
popperClass选项，自定义弹出层class，同elementUI#30 - 新增
remove-tagclear事件，同elementUI
- 支持动态加载子项 #17
Function(parentItem<Object>): Promise: []详情查看Attributes文档 - 支持通过设置
label-key，children-key，value-key来设置 label、value、children 字段
- 修复 #11 BUG
- 新增
collapse-tags选项，控制输入框标签折叠，同elementUI - 新增
show-all-levels选项，控制是否展示所有层级，同elementUI - 新增
output-level-value选项，控制输出value 是否为全部层级 - 新增
separator选项，控制层级分隔符Note：会对输出value和展示标签同时起作用 - 新增
no-data-text选项，修改无数据文字
可直接复制源码
推荐使用npm安装：
npm install ele-multi-cascader// main.js
import EleMultiCascader from "ele-multi-cascader"
// 从2.2.5后不需要单独引用CSS
import "ele-multi-cascader/dist/cascader.css"
Vue.use(Element)
Vue.use(EleMultiCascader)| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| options | 选项数据源 | Array | -- | -- |
| v-model(value) | 绑定值 | Array | -- | -- |
| placeholder | 占位文本 | String | -- | 请选择 |
| no-data-text | 无数据占位字符 | String | 无数据 | |
| size | 尺寸 | String | medium/small/mini | -- |
| disabled | 禁用 | Boolean | true/false | false |
| selectChildren | 点击选中子项 | Boolean | true/false | false |
| collapse-tags | 是否折叠标签 | Boolean | true/false | false |
| show-all-levels | 控制标签展示全部层级 | Boolean | true/false | false |
| output-level-value | 控制输出value 是否为全部层级 | Boolean | true/false | false |
| separator （会对输出value和展示标签同时起作用） | 层级分隔符 | String | - | / |
| allowLoadChildren | 是否动态加载子选项 | Boolean | true/false | false |
| loadChildrenMethod | 加载子选项方法 | (parentItem: Object) => Promise | Function | null |
| showLoadingIndicator | 是否展示子项可加载指示器 | Boolean | true/false | true |
| label-key、value-key、children-key | 用于设置label、value、children字段 | String | String | label |
| clearable | 是否可清除全部已选项 | Boolean | true/false | false |
| popperClass | Select 下拉框的类名 | string | - | - |
| panelWidth | 控制层级面板宽度 | Number | String | Number / 'auto' |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| isLeaf | 是否为叶子节点 | Boolean，特别说明：标记该项目是否为叶子节点(树的最后一层)，仅用于动态加载子项。如果children(childrenKey)值不为空，会直接忽略isLeaf。如果为真，则不会加载子选项，也不会有加载指示灯，详情可查看demo |
true/false | false |
| disabled | 禁用该选项 | Boolean | true/false | false |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 绑定值发生变化时 | (Array:values当前选中值, Array:items当前选中对象数组) |
| blur | 失去焦点 | -- |
| focus | 获得焦点 | -- |
| clickItem | 点击某个子项 | Object: 子项 |
| spread | 展开某选项 | Object: 子项 |
| remove-tag | 移除tag时触发 | (String:label移除的tag，Object:deletedItem所移除选项) |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | -- |
<!-- *.vue -->
<template>
<el-form label-width="80px" ref="form" :model="form" :rules="rules" label-position="left">
<el-form-item label="ISP: " prop="isp">
<ele-multi-cascader
:options="options"
v-model="form.isp"
placeholder="选择运营商"
@change="ispChange"
>
</ele-multi-cascader>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit">测试提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
options: [],
outputs: {
values: [],
items: []
},
rules: {
isp: [
{
required: true,
trigger: "change",
validator(rule, val, cb) {
if (val.length === 0) {
cb(new Error("请选择运营商"));
} else {
cb();
}
}
}
]
},
form: {
isp: []
}
};
},
methods: {
ispChange(values, items) {
this.outputs.values = values;
this.outputs.items = items;
},
submit() {
this.$refs.form.validate(valid => {
if (valid) {
this.$message({
message: "测试通过",
type: "success"
});
}
});
}
}
};
</script>- Vue
- ElementUI