树型多选框

背景：日常开发项目过程中，项目数据结构往往会有嵌套现象，展示时候常常需要数据聚合展示，那么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)
}