我要评论用element-ui的 el-input，el-tree，el-popover组件组合封装
@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
<el-popover
placement="bottom"
width="350"
trigger="click">
<el-tree
style="width:300px"
ref="tree"
:data="options"
:check-strictly="false"
show-checkbox
node-key="id"
:default-expanded-keys="[]"
:default-checked-keys="[]"
:props="{
children: 'children',
label: 'name'
}"
@check-change="handlecheckchage"
@node-click="handlenodeclick"
>
</el-tree>
<el-input slot="reference"
style="width:380px"
v-model="value.name"
placeholder="节点"
clearable
@clear="handleiptclear">
</el-input>
</el-popover>
</div>
var main = {
data() {
return {
options: [
{id:'1', name: '1',
children:[
{id:'11', name: '11'},
{id:'12', name: '12'}
]
},
{id:'2', name: '2'}
],
value:{id:'', name: ''}
}
},
methods: {
// 清空输入框内容
handleiptclear(){
this.$refs.tree.setcheckednodes([])
this.value.id = ''
this.value.name = ''
},
// checkbox被选中或取消选中
handlecheckchage(arg1, arg2, arg3){
const seltednodes = this.$refs.tree.getcheckednodes()
const ids = seltednodes.map(n => n.id)
const names = seltednodes.map(n => n.name)
this.value.id = ids
this.value.name = names
},
// 节点被点击
handlenodeclick(arg1, arg2, arg3){
console.log('nodes:', arg1, arg2, arg3)
},
}
};
var ctor = vue.extend(main)
new ctor().$mount('#app')
可以根据函数方法拿到里面的参数，实现多选节点效果
到此这篇关于element-ui 实现输入框下拉树组件功能的文章就介绍到这了,更多相关element-ui 输入框下拉树组件内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论