简介
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
属性
name | type | description |
---|---|---|
value/v-model | */*[] | 绑定值,如果 multiple 属性为 true ,绑定的必须为 Array 类型 |
data | object[] | 下拉的选项数据,是一个树形结构,参考上面的实例数据 |
props | object | 树形结构的参数对照表,默认:{ value: 'value', label: 'label', children: 'children' } |
multiple | boolean | 是否多选,默认:false |
placement | string | 继承 element-ui 的 placement 属性,默认:botttom-start |
size | string | 继承 element-ui 的 size 属性,默认: samll |
width | string | 组件的宽度,默认: 240px |
disabled | boolean | 是否禁用,默认:false |
disabledValues | *[] | 禁用的值,默认:[] |
placeholder | string | 占位符,默认:‘请选择’ |
事件
change(value)
选项修改事件,返回修改的值
更多扩展组件:
el-table-infinite-scroll