基于element-ui的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;
  }
}

展示效果