Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

mrabit/cascader-multi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cascader-multi

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

效果预览

image

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 输入框大小,可选值为largesmall或者不填 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