基于elementUI的el-input, el-tree 实现组件支持下拉选择框树的结构的数据
代码如下：
使用到组件：el-popover、el-selece、el-tree、el-input
<template><el-popoverplacement="bottom"width="350"trigger="click"><el-treeref="tree":data="options":check-strictly="true"show-checkboxnode-key="enterpriseId":default-expanded-keys="[]":default-checked-keys="[]":props="{children: 'child',label: 'enterpriseName'}"@check-change="handleCheckChage"@node-click="handleNodeClick"></el-tree><el-input slot="reference" v-model="value.name" placeholder="采购人" clearable @clear="handleIptClear"></el-input></el-popover></template><script>export default {data(){return {options: [],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 = idsthis.value.name = names},// 节点被点击handleNodeClick(arg1, arg2, arg3){console.log('nodes:', arg1, arg2, arg3)},}}</script>
