el-select-tree
v2.1.1-beta.17
Published
ElementUI's el-select combined with el-tree.
Downloads
1,703
Maintainers
Readme
el-select-tree
ElementUI's el-select combined with el-tree.
- Online examples https://yujinpan.github.io/el-select-tree/
- 2.1 Support custom menu header/footer.
- 2.1
check-on-click-node
is available withshow-checkobx
, default isfalse
. Broken Change- 2.1
expand-on-click-node
is available, default istrue
.- 2.1 Support virtual list.
- 2.0 Comprehensively improve the utilization rate of original parts.
Usage
Install
npm install --save el-select-tree
Require element-ui
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";
Global registration
import Vue from "vue";
import ElSelectTree from "el-select-tree";
Vue.use(ElSelectTree);
In-component registration
import ElSelectTree from "el-select-tree";
export default {
components: {
ElSelectTree,
},
};
Complete example
<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>
Component API
Extends ElTree
And ElSelect
All Props/Methods/Events/Slots.
| props | methods | events | slots | | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | el-select | el-select | el-select | el-select | | el-tree | el-tree | el-tree | el-tree |
Special Thanks
Special thanks to JetBrains for letting me use the free license.