# @dzc314/el-cascader-leaf

> el-cascader-leaf是一个级联单项选择框，依赖于element-ui的el-cascader级联组件，本组件最大亮点是对选中的叶子节点进行双向数据绑定。 有些时候我们只需要用到叶子节点的值，而el-cascader需要传选中节点及其父节点的值才能匹配上叶子节点，el-cascader-leaf可完美解决此触点，快来试试吧。

Latest version **0.1.6** (published 2020-12-09) · 0 weekly downloads

## Install

```sh
npm install @dzc314/el-cascader-leaf
pnpm add @dzc314/el-cascader-leaf
yarn add @dzc314/el-cascader-leaf
bun add @dzc314/el-cascader-leaf
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-12-09 |
| First published | 2020-12-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 989.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | nohyou |
| Keywords | cascader, 级联单选框, 数据绑定叶子节点 |

## Links

- npm: https://www.npmjs.com/package/@dzc314/el-cascader-leaf
- Repository: https://github.com/dzc314/el-cascader-leaf
- Homepage: https://github.com/dzc314/el-cascader-leaf#readme
- Issues: https://github.com/dzc314/el-cascader-leaf/issues
- npm.io page: https://npm.io/package/@dzc314/el-cascader-leaf

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.14.1

## Recent versions

- 0.1.6 (latest) — 2020-12-09
- 0.1.5 — 2020-12-09
- 0.1.4 — 2020-12-09
- 0.1.3 — 2020-12-09
- 0.1.2 — 2020-12-09
- 0.1.1 — 2020-12-09
- 0.1.0 — 2020-12-09

## README

# el-cascader-leaf
## 说明
el-cascader-leaf是一个级联单项选择框，依赖于element-ui的el-cascader级联组件，本组件最大亮点是对选中的叶子节点进行双向数据绑定。
有些时候我们只需要用到叶子节点的值，而el-cascader需要传选中节点及其父节点的值才能匹配上叶子节点，el-cascader-leaf可完美解决此痛点，快来试试吧。

## 通过NPM安装
```
npm i @dzc314/el-cascader-leaf -S
```

### 引入组件
```
import '@dzc314/el-cascader-leaf'
```

### 使用
```
<template>
  <el-cascader-leaf 
    v-model="value" // 绑定选中末节点的值 
    :options="options" // 树结构选项数据
    :props="props" 
    @change="changeHandle" 
  ></el-cascader-leaf>
</template>
<script>
export default{
  data() {
    return {
      value: 4, // 双向数据绑定的值
      props: {
        value: 'id',  // 设置取值的key, 默认值为'value'
        label: 'label', // 显示文本, 默认值为'label'
        parentKey: 'parent', // 设置父值key, 根据options的数据结构自行定义, 默认值为'parentId'
        children: 'children', // 树结构中子集的key, 默认值为'children'
      },
      options: [
        {
          id: 1,
          parent: null,
          label: '一级1',
          children: [
            {
              id: 2,
              parent: 1,
              label: '一级1.1',
              children: [
                {
                  id: 3,
                  parent: 2,
                  label: '一级1.1.1',
                },
                {
                  id: 4,
                  parent: 2,
                  label: '一级1.1.2',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  methods: {
    changeHandle(value, selections) {
      // value [String, Number] 选中末节点的值
      // selections [Array] 选中节点及其所有父节点的对象级数组
      console.log(selections);
    }
  }
}
</script>
```


### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

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