ElementUI's el-select combined with el-tree.
- Online examples https://yujinpan.github.io/el-select-tree/
Now the new version 2.0 is released, which comprehensively improves the utilization of the original components.
npm install --save el-select-tree
If your project does not use element-ui, you need to introduce a separate element-ui package, like this:
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"
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' }
]
};
}
};
</script>
name | type | description |
---|---|---|
value/v-model |
*/*[] |
bound value, the type must be array if attribute's multiple is true |
props |
Object |
{value, label, children, isLeaf, disabled} |
Extends ElTree
And ElSelect
All Props.
See details:
- el-tree https://element.eleme.io/#/zh-CN/component/tree
- el-select https://element.eleme.io/#/zh-CN/component/select
- Support
ElSelect
eventschange
,visible-change
,remove-tag
,clear
,blur
,focus
. - Support
ElTree
eventsnode-click
.
See details:
- https://element.eleme.io/#/zh-CN/component/select#select-events
- https://element.eleme.io/2.15/#/zh-CN/component/tree#events
- https://element.eleme.io/#/zh-CN/component/select#select-slots
option
select-option slot
<template>
<el-select-tree>
<span slot="option" slot-scope="{ node, data }">{{ data.label }}</span>
</el-select-tree>
</template>
Special thanks to JetBrains for letting me use the free license.