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

下拉树实际开发中使用场景很多，但是组件并非一定满足项目开发的需求，所以自己封装了一个。

说明：该下拉树在一个table中一列展示
片段代码不能正常运行，所以主要传达的是一种解决方式的思路，有问题请指正。

template：

                  
                    
                      

                        
{{data.code}}
                        
{{data.name?data.name:data.code}}
                      
                    
                  
                

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;
  }
}

展示效果