# y-multi-cascader

> 移动端3级级联多选组件

Latest version **1.0.3** (published 2020-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install y-multi-cascader
pnpm add y-multi-cascader
yarn add y-multi-cascader
bun add y-multi-cascader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-11-27 |
| First published | 2020-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Halo |
| Maintainers | halo-951 |

## Links

- npm: https://www.npmjs.com/package/y-multi-cascader
- Repository: http://192.168.55.42/libin/mulit-cascader
- npm.io page: https://npm.io/package/y-multi-cascader

## Recent versions

- 1.0.3 (latest) — 2020-11-27
- 1.0.2 — 2020-11-27
- 1.0.1 — 2020-11-27

## README

# 移动端 3 级级联 （单选/多选）

## install

1. 安装: `yarn add y-multi-cascader`

## options

| 属性        | 描述                                                                                                                   | 格式                       | 默认值                                           |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------ |
| tree-data   | 选择项节点数据                                                                                                         | TreeData                   | []                                               |
| map         | 节点数据映射,当数据源不是标准的[{key,value,children}] 格式时,<br />可以通过 map 将对应字段映射                         | TreeDataMap                | { key:'key', value:'value', children:'children'} |
| multi       | 是否多选                                                                                                               | boolean                    | true                                             |
| title       | 标题文本,可用 slot 替代                                                                                                | string                     | '请选择'                                         |
| submit-text | 提交按钮文本                                                                                                           | string                     | '确认'                                           |
| selected    | 当前选中项, 一般情况下,请使用 `v-model` 进行双双向绑定 ,如果多选情况下,selected 返回的是一个数组,如果是单选,则返回对象 | Array(多选) , Object(单选) | []                                               |

### 数据格式

```
// 结构化选项数据
type TreeData [
  {
    key: String | Number;
    value: any;
    children: Array<TreeData>
  }
]
// 字段映射
type TreeDataMap {
  key: String
  value: String
  children: String
}
```

## example

```
<template>
  <!-- 默认写法 -->
  <multi-cascader
            v-model="selection"
            ref="cascader"
            title="选择"
            multi
            :tree-data="treeList"
  />
  <!-- tree data 结构映射 -->
  <multi-cascader
            v-model="selection"
            ref="cascader"
            title="选择"
            multi
            :tree-data="treeList"
            :map="{
              key: 'key',
              value: 'value',
              children: 'children'
            }"
  />
  <!-- 单选用法 -->
  <multi-cascader
            v-model="checked"
            ref="cascader"
            title="选择"
            :multi="false"
            :tree-data="treeList"
  />
</template>

<script>
import MultiCascader from 'y-multi-cascader'


export default {
  components: {
    MultiCascader
  },
  data: {
    checked: null,
    selection: [],
    treeList:[
      {
        key:'a',
        value:'b',
        children:[
          {
            key:'a',
            value:'b',
            children:[
              key:'a',
              value:'b'
            ]
          }
        ]
      }
    ]
  },
  methods:{
    open() {
        this.$refs.cascader.open() // 注意: 级联器开关通过 内置方法实现, v-model绑定的是选中数据
    }
  }

}

</script>
```

### slots 插槽

| 插槽   | 描述         |
| ------ | ------------ |
| header | 自定义标题栏 |

### 备注

> 如果要定制化修改, 请 fork 仓库[](), 并将组件移动到你的公共组件目录下

---
_Source: https://npm.io/package/y-multi-cascader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._