背景👀： 日常开发项目过程中，项目数据结构往往会有嵌套现象，展示时候常常需要数据聚合展示，那么element-ui提供的select组件就不太合适了，因为select组件并没有提供数形扩张。而有着树型扩展的tree组件则无法进行input框展示。
用到组件🤷♂️：element-ui提供的el-select以及el-tree
思路😃：el-select下el-option包裹el-tree
相关代码✍：
<el-select
v-mode="opt_items"
multiple\
placeholder="请选择"
@remove-tag="tagRemove">
<el-option style=="height: auto; padding: 0" :value="opt_options">
<el-tree\
ref="elTree"
:data="opt_options"
show-checkbox
node-key="item"
:props="defaultProps"
@check="handleNodeCheck">
</tree>
</el-option>
</el-select>
功能点1👏： 点击树型复选框能够实现在select框中显示对应信息，这里要区别父节点和子节点。
解决✔： 这里通过@check方法实现这个功能，这样做的好处是能够区分父子节点，并且兼容全选、取消选、多子节点的点击问题：
/**
* @description 节点点击
* @param {Object} node 删除节点
* @param {Object} nodeObj 树选中状态
*/
handleNodeCheck(node, nodeObj) {
let checkedArr: any = []
nodeObj.checkedNodes.forEach(item => {
if(!item.item_data) checkedArr = push(item.item)
})
}
this.opt_items = checkedArr
功能点2👏： 删除select tag项时候，取消对应tree项的选中状态，并且如果是子节点，得影响到父节点。
解决✔：这里调用tree得setChecked方法，设置对应得复选框状态：
/**
* @description tag标签删除
* @param {String} tag删除tag
*/
tagRemove(tag) {
(this.$refs.elTree as any).setChecked(tag, false)
}
tip（￣︶￣）↗ : options记得设置height:auto兼容tree高度
