下拉树理论开发中应用场景很多，然而组件并非肯定满足我的项目开发的需要，所以本人封装了一个。
阐明：该下拉树在一个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; }}展现成果