由于
elementUI
的级联选择器暂不支持多选,因此基于elementUI
开发此组件,所有的样式class
都是使用elementUI
原样式,基本可无副作用的引入项目使用,有任何问题欢迎发布issue
,我会在看到第一时间回复大家。 如果觉得组件还不错的话 不要吝啬你的star
哦~
- 由于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-tag
clear
事件,同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"
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 | 加载子选项方法 | Function(parentItem): 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' | 180 |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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