elmentui tree+搜索功能使用记录

 <el-form-item  label="岗位" prop="auditCompanyId" label-width="110px">

                    <el-input

                        placeholder="输入关键字进行过滤"

                        v-model="filterText">

                    </el-input>

                    <el-container style="  border: 1px solid #eee">

                      <el-tree style="margin-right:50px"

                        class="filter-tree"

                        node-key="id"

                        :data="companyTreeList"

                        default-expand-all

                        :filter-node-method="filterNode"

                        :expand-on-click-node=false

                        @node-click="handleCompanyNodeClick"

                        ref="tree"

                        highlight-current>

                      </el-tree>

                      <el-tree

                        class="filter-tree"

                        node-key="id"

                        :data="jobTreeList"

                        default-expand-all

                        :expand-on-click-node=false

                        ref="treeJob"

                        @node-click="handleJobNodeClick"

                        highlight-current>

                      </el-tree>

                    </el-container>

 </el-form-item>

export default class CreateInfo extends AbpBase {

  @Prop({ type: Boolean, default: false }) value: boolean;

 

  //岗位公司下拉框

  companyTreeList:Array<any>=[];

  //岗位下拉框

  jobTreeList:Array<any>=[];

  filterText:string= '';

 

  //监听公司下拉框搜索

  @Watch("filterText")

  async visibleChangeTest(filterText: string) {

    console.log(filterText)

    let elJob: any = this.$refs.tree;

    elJob.filter(filterText);

  }

  filterNode(value, data) {

        if (!value) return true;

        return data.label.indexOf(value) !== -1;

   }

 

   //数据绑定

//得到公司下拉框

   async getCompanyTree(callback){

    await this.$store.dispatch({ type: "flowScheme/getCompanyElmentTree" });

    callback();

   }

   //得到部门下拉框

   async getPostTree(companyId,callback){

    await this.$store.dispatch({

       type: "flowScheme/getPostElmentTree" ,

       data: companyId,});

    callback();

   }

 

   //公司下拉框选择事件

   async handleCompanyNodeClick(data){

      let _this=this;

      //选择的公司Id

      _this.flowScheme["auditCompanyId"]=data.id;

      await this.getPostTree(data.id,()=>{

          //绑定节点类型下拉框

        _this.jobTreeList =  _this.$store.state.flowScheme.postTreeData;

      });

   }

   //岗位下拉框选择事件

  async handleJobNodeClick(data){

      //审核对象值

      this.flowScheme["auditObjectValue"]=data.id;

   }

   async create(){

     let _this=this;

        await this.getCompanyTree(()=>{

            //绑定节点类型下拉框

            _this.companyTreeList =  _this.$store.state.flowScheme.companyTreeData;

        });

   }

}

</script>

效果图

 

 默认选中：

let elJob: any = this.$refs.treeJob;

elJob.setCurrentKey(6);