cascader-multi
基于iView-Cascader的多选级联选择器
效果预览
install 安装
npm i cascader-multi --saveuse 使用
在main.js中写入下面的代码
import cascaderMulti from "cascader-multi";
Vue.use(cascaderMulti);接下来，你就可以在页面中使用cascader-multi了
<template>
<cascaderMulti v-model="end_code" :data="end_codes" placeholder="状态码"></cascaderMulti>
</template>
<script>
export default {
data () {
return {
end_code: [],
end_codes: []
}
}
}
</script>| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 用于渲染页面的数据 | Array | 无 |
| value | 默认已选择数据项 | Array | 无 |
| multiple | 是否支持多选 | Boolean | false |
| filterable | 是否支持搜索 | Boolean | true |
| disabled | 是否禁用选择器 | Boolean | false |
| clearable | 是否支持清除 | Boolean | true |
| size | 输入框大小，可选值为large和small或者不填 |
String | - |
| transfer | 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果 | Boolean | false |
| placeholder | 输入框占位符 | String | - |
| element-id | 给表单元素设置 id，详见 iView-Form 用法。 | String | - |
| name | 给表单元素设置 name，详见 iView-Form 用法。 | String | - |
| 事件 | 说明 | 返回值 |
|---|---|---|
| on-change | 选择完成后的回调，返回值此时已选的数据数组 | data |
补充说明
- 传入data数据格式如下：
[ { value: 1000, label: "接通", children: [{ label: "已报价", value: 1100, children: [], multiple: true //可忽略项，当为true时该项为多选 }] } ]
文件目录
.
├── README.md
├── package.json
├── webpack.config.js
├── .gitignore
├── .gitattributes
├── .babelrc
├── src
│ ├── lib
│ │ ├── components
│ │ │ ├── index.js
│ │ │ ├── cascader-multi-panel.vue
│ │ │ └── cascader-multi.vue
│ │ └── utils
│ │ └── index.js
│ └── index.js
├── dist
│ ├── cascader-multi.js
│ └── cascader-multi.js.map