# el-tree-selector

> 树选择器

Latest version **0.1.4** (published 2022-06-28) · 0 weekly downloads

## Install

```sh
npm install el-tree-selector
pnpm add el-tree-selector
yarn add el-tree-selector
bun add el-tree-selector
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2022-06-28 |
| First published | 2022-06-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 391.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | zyfen63@163.com |
| Maintainers | zhangyf163 |

## Links

- npm: https://www.npmjs.com/package/el-tree-selector
- npm.io page: https://npm.io/package/el-tree-selector

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [v-bar](https://npm.io/package/v-bar.md) ^3.0.0
- [stylus](https://npm.io/package/stylus.md) ^0.54.5
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.9
- [stylus-loader](https://npm.io/package/stylus-loader.md) ^3.0.2
- [pug-plain-loader](https://npm.io/package/pug-plain-loader.md) ^1.1.0

## Recent versions

- 0.1.4 (latest) — 2022-06-28
- 0.1.3 — 2022-06-28
- 0.1.2 — 2022-06-27
- 0.1.1 — 2022-06-27

## README

# tree-selector

## 安装
```
npm install el-tree-selector
```

### 使用方式
```
import Vue from 'vue'
import treeSelector from 'el-tree-selector'
import 'el-tree-selector/lib/tree-selector.css'
Vue.use(treeSelector)
```

### 页面组件
```
<tree-selector
	@openSeletor="openSeletor" 
	:model="model" 
	:title="title" 
	:datas="datas" 
	:checkedDatas="checkedDatas" 
	@getSelectData="getSelectData">
</tree-selector>
```

### script部分
```
export default {
  name: 'App',
  components: {
    
  },
	data(){
		return{
			model:false,
			title:'树选择器',
			datas:[{
				label: '事业部',
				id: 2,
				parentId: 1,
				icon: 'el-icon-folder',
				child: [{
						label: '数据中心',
						id: 3,
						parentId: 2,
						icon: 'el-icon-folder',
						child: [{
								label: '张三',
								id: 4,
								parentId: 3,
								icon: 'el-icon-user'
							},
							{
								label: '数据维护',
								id: 5,
								parentId: 3,
								icon: 'el-icon-folder',
								child: [{
									label: '数据安全',
									id: 16,
									parentId: 5,
									icon: 'el-icon-folder',
									child: [{
											label: '李四',
											id: 17,
											parentId: 16,
											icon: 'el-icon-user'
										},
										{
											label: '王五',
											id: 18,
											parentId: 16,
											icon: 'el-icon-user'
										}
									]
								}]
							}
						]
					},
					{
						label: '开发一部',
						id: 6,
						parentId: 2,
						icon: 'el-icon-folder',
						child: [{
								label: '教务开发组',
								id: 7,
								parentId: 6,
								icon: 'el-icon-folder',
								child: [{
									label: '教务产品中心',
									id: 19,
									parentId: 7,
									icon: 'el-icon-folder',
									child: [{
											label: '赵六',
											id: 20,
											parentId: 19,
											icon: 'el-icon-user'
										},
										{
											label: '陈启',
											id: 21,
											parentId: 19,
											icon: 'el-icon-user'
										}
									]
								}]
							},
							{
								label: '教务维护组',
								id: 8,
								parentId: 6,
								icon: 'el-icon-folder',
								child: [{
									label: '运维中心',
									id: 22,
									parentId: 8,
									icon: 'el-icon-folder',
									child: [{
											label: '张飞',
											id: 23,
											parentId: 22,
											icon: 'el-icon-user'
										},
										{
											label: '关羽',
											id: 24,
											parentId: 22,
											icon: 'el-icon-user'
										}
									]
								}]
							}
						]
					}
				]
			},
			{
				label: '财务部',
				id: 9,
				parentId: 1,
				icon: 'el-icon-folder',
				child: [{
						label: '税务管理',
						id: 10,
						parentId: 9,
						icon: 'el-icon-folder',
						child: [{
								label: '妲己',
								id: 11,
								parentId: 10,
								icon: 'el-icon-user'
							},
							{
								label: '小乔',
								id: 12,
								parentId: 10,
								icon: 'el-icon-user'
							},
							{
								label: '安其拉',
								id: 13,
								parentId: 10,
								icon: 'el-icon-user'
							}
						]
					},
					{
						label: '财务管理',
						id: 13,
						parentId: 9,
						icon: 'el-icon-folder',
						child: [{
								label: '西施',
								id: 14,
								parentId: 13,
								icon: 'el-icon-user'
							},
							{
								label: '貂蝉',
								id: 15,
								parentId: 13,
								icon: 'el-icon-user'
							},
							{
								label: '米莱迪',
								id: 16,
								parentId: 13,
								icon: 'el-icon-user'
							},
							{
								label: '张良',
								id: 17,
								parentId: 13,
								icon: 'el-icon-user'
							}
						]
					}]					
				}
			],
			checkedDatas:[{
					label: '西施',
					id: 14,
					parentId:13,
					icon: 'el-icon-user'
				},
				{
					label: '张良',
					id: 17,
					parentId: 13,
					icon: 'el-icon-user'
				}],
			quickSearch: '',
		}
	},
	methods:{
		
		openSeletor(){
			this.model = true;
		},
		// 获取选择数据
		getSelectData(datas, showValue) {
			// 清空历史选择数据
			this.model = false
			if(showValue){
				this.quickSearch = showValue
			}
			
		},
	}
}
```

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

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