https://github.com/zjhr/zr-select-tree

基于vue,elementui二次封装的简单的下拉选择树
https://github.com/zjhr/zr-select-tree

element elemet-ui select tree vue vuecli3

Last synced: about 1 year ago
JSON representation

基于vue,elementui二次封装的简单的下拉选择树

• Host: GitHub
• URL: https://github.com/zjhr/zr-select-tree
• Owner: zjhr
• Created: 2020-04-22T07:01:12.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:02:40.000Z (over 3 years ago)
• Last Synced: 2025-02-01T07:25:00.876Z (over 1 year ago)
• Topics: element, elemet-ui, select, tree, vue, vuecli3
• Language: Vue
• Size: 2.38 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# zr-select-tree

## 说明

基于 vue,elementui 二次封装的简单的下拉选择树，基于 elementui 的[popover](https://element.eleme.cn/2.5/#/zh-CN/component/popover)和[tree](https://element.eleme.cn/2.5/#/zh-CN/component/tree)

## 快速上手

> 先 npm 下载插件

```

`npm install zr-select-tree --save`

或

`npm i zr-select-tree -S`

import zrSelectTree from 'zr-select-tree'

import 'zr-select-tree/lib/zr-select-tree.css'

Vue.use(zrSelectTree)

```

## 使用指南

```js

;

	

```

## 参数

  

    参数

    说明

    类型

    可选值

    默认值

  

  

    含有elementui的[tree](https://element.eleme.cn/2.5/#/zh-CN/component/tree)的属性和方法

    -

    -

    -

    -

  

  

    data

    tree数据

    Array

    格式为elementui的[tree](https://element.eleme.cn/2.5/#/zh-CN/component/tree)的格式

    []

  

  

    v-module

    双向绑定input的内容

    String

    -

    -

  

  

    inputStyle

    input的style

    String

    -

    -

  

  

    treeHeight

    下拉tree的高度

    String

    -

    "200px"

  

  

    size

    大小

    String

    medium / small / mini

    ""

  

  

    placeholder

    input的placeholder

    String

    -

    

  

  

    disabled

    是否禁用

    Boolean

    true|false

    false

  

  

    currentNodeKey

    默认选中节点的tree的key（根据自己设置的node-key定义）

    String, Number

    -

    -

  

  

    radio

    单选

    Boolean

    true|false

    false

  

  

    radioP

    单选模式，可以选中父级

    Boolean

    true|false

    false

  

  

    $emit('show')

    popover显示回调

    -

    -

    -

  

  

    $emit('after-enter')

    popover显示完成回调

    -

    -

    -

  

  

    $emit('hide')

    popover隐藏回调

    -

    -

    -

  

  

    $emit('after-leave')

    popover隐藏完成回调

    -

    -

    -

  

  

    $emit("checkedChange", data);｜$emit("checkedChange", data,multiples,keys);

    tree节点选中回调，返回节点数据｜多选时候，返回节点数据和选择的所有数据和选中的所有keys（根据自己设置的node-key定义返回）

    -

    -

    -

  

  

    $emit("unCheckedChange", data);｜$emit("unCheckedChange", data,multiples,keys);

    tree节点取消选中回调，返回节点数据｜多选时候，返回节点数据和选择的所有数据和选中的所有keys（根据自己设置的node-key定义返回）

    -

    -

    -

  

  

    $emit("currentChange", data, node)

    tree节点选中切换回调，返回节点数据和node

    -

    -

    -

  

  

    工具类方法--》getNodeDataFun

    获取选择节点数据

    -

    -

    -

  

  

    工具类方法--》loadMultiples

    多选时候，回填数据，当data属性改变时候会触发，也可以手动触发

    -

    -

    -

  

  

    工具类方法--》toggleChangePopover

    改变Popover

    -

    -

    -