关于element-ui:基于elementui的select和tree自写一个下拉选择树

下拉树理论开发中应用场景很多，然而组件并非肯定满足我的项目开发的需要，所以本人封装了一个。

阐明：该下拉树在一个 table 中一列展现
片段代码不能失常运行，所以次要传播的是一种解决形式的思路，有问题请斧正。

template：

<el-select
                  v-model="scope.row.deptname"
                  placeholder="请抉择"
                  class="select-with-tree"
                  filterable
                  :filter-method="($event)=> filterdeptTree($event,scope.$index)">
                  <el-option
                  :value="scope.row.deptname"
                  class="swt-option">
                    <el-tree
                      :ref="'deptselectree'+scope.$index"
                      highlight-current
                      @node-click="($event)=> changeChoosedDept($event,scope.row,scope.$index)"
                      :indent="10"
                      node-key="code"
                      :expand-on-click-node="false"
                      accordion
                      :filter-node-method="filterdeptNode"
                      :data="depttreelist">
                      <div class="role-dept-tree-node clearfix" slot-scope="{data}">
                        <div class="tree-title-code" v-show="data.name">{{data.code}}</div>
                        <div class="tree-title">{{data.name?data.name:data.code}}</div>
                      </div>
                    </el-tree>
                  </el-option>
                </el-select>

js：

/**
       * select-tree 搜寻联动
       * filterTree 为 selectfilter，获取输出的内容触发 filteNode
       * filterNode 为 treefilter
       * **/
      filterdeptTree(val,index) {this.$nextTick(() => {if (this.$refs['deptselectree' + index] && this.$refs['deptselectree' + index][0]) {this.$refs['deptselectree' + index][0].filter(val)
          }
        })
      },
      filterdeptNode(value, data) {if (!value) return true;
        var dataarr = []
        if (data.name) {dataarr.push(data.name)
        }
        if (data.code) {dataarr.push(data.code)
        }
        var datastring = JSON.stringify(dataarr)
        return datastring.indexOf(value) !== -1;
      },

/**
       * 点击部门后即触发行对应的 dept 和 deptname 的变动
       * 参数别离为：点击节点，行数据，行 index
       * **/
      changeChoosedDept(deptdata,data,index) {
        let that = this;
        this.$nextTick(() => {this.$set(data, 'dept', deptdata.code)
          this.$set(data, 'deptname', deptdata.name)
        })
      },

css
因为相当于在 select 外面嵌了一个 tree，所以在款式上须要本人复写原组件款式

.select-with-tree {width: 100%;}

.swt-option {
  &.el-select-dropdown__item {
    height: auto;
    padding: 0;

    &.selected {font-weight: normal;}
  }
}
.role-dept-tree-node{
  .tree-title-code{
    float:right;
    // width:150px;
    text-align: right;
    margin-right: 20px;
  }
  .tree-title{margin-right:170px;}
}

展现成果