element-ui 的 el-select 与 el-tree 的功能组合

[TOC]

简介

element-ui 的 el-select 与 el-tree 组件的功能组合。

在线实例：https://yujinpan.github.io/el-select-tree/实现原理：https://github.com/yujinpan/el-select-tree/blob/master/src/components/index.vue

使用

安装

npm install --save el-select-tree

对 element-ui 的依赖

如果你的项目中没有使用 element-ui,
你需要引入单独的 element-ui 包，像这样：

import 'el-select-tree/lib/element-ui';

全局注册

import Vue from 'vue';import ElSelectTree from 'el-select-tree';Vue.use(ElSelectTree);

局部注册

import ElSelectTree from 'el-select-tree';export default {  components: {    ElSelectTree  }};

完整的实例

<template>  <el-select-tree    width="120px"    placeholder="请选择内容"    :data="treeData"    :disabled-values="disabledValues"    v-model="value"  ></el-select-tree></template><script>import ElSelectTree from 'el-select-tree';export default {  components: {    ElSelectTree  },  data() {    return {      value: 2,      treeData: [        {          value: 1,          label: 'text1',          children: [{ value: 5, label: 'text5' }, { value: 6, label: 'text6' }]        },        { value: 2, label: 'text2' },        { value: 3, label: 'text3' },        { value: 4, label: 'text5' }      ],      disabledValues: [3]    };  }};</script>

组件 API

属性

nametypedescriptionvalue/v-model*/*[]绑定值，如果 multiple 属性为 true，绑定的必须为 Array 类型dataobject[]下拉的选项数据，是一个树形结构，参考上面的实例数据propsobject树形结构的参数对照表，默认：{ value: 'value', label: 'label', children: 'children' }multipleboolean是否多选，默认：falseplacementstring继承 element-ui 的 placement 属性，默认：botttom-startsizestring继承 element-ui 的 size 属性，默认： samllwidthstring组件的宽度，默认： 240pxdisabledboolean是否禁用，默认：falsedisabledValues*[]禁用的值，默认：[]placeholderstring占位符，默认：'请选择'

事件

change(value) 选项修改事件，返回修改的值

更多扩展组件：
el-table-infinite-scroll