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.