versus2017 / cascader-multi

基于iView-Cascader的多选级联选择器

cascader-multi

基于iView-Cascader的多选级联选择器

效果预览

install 安装

npm i cascader-multi --save

use 使用

在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