el-select组件的下拉框里面的搜索功能加树形组件

1. 首先看一下效果图

2. 实现过程

• html部分

<el-select ref="select" :clearable="true" @clear="clearSelect" @remove-tag="removeTagChange"  v-model="addForm.departmentList" placeholder="请选择" multiple collapse-tags style="width:220px">
                <el-popover
                  placement="right"
                  width="400"
                  trigger="click"
                  v-model="popover"
                >
                <div class="outer-container" @click="SelectVisible">
                  <div class="inner-container">
                      <div class="sel-input">
                        <el-input
                          placeholder="输入关键字进行过滤"
                          v-model="filterTextAll"
                          size="mini"
                          @click="intClick"
                          ref="inputRef"
                        >
                          <i slot="suffix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                      </div>
                      <div class="repeatUserStyle">
                        <span>公司成员</span>
                      </div>
                      <!-- <el-option hidden v-for="item in branchList" :key="item.id" :value="item.id" :label="item.name+'——'+item.deptName" style="height: auto" /> -->
                      <el-tree
                        class="filter-tree"
                        :data="branchList2"
                        :props="defaultProps"
                        node-key="id"
                        show-checkbox
                        default-expand-all
                        :expand-on-click-node="true"
                        :filter-node-method="filterNodeAll"
                        @check-change="handleCheckChange"
                        @node-click="handleNodeClick"
                        @check="handleCheckClick"
                        ref="tree1"
                      >
                        <span slot-scope="{ data }">
                          <span>{{ data.deptName !== "全选" ? data.name+'——'+data.deptName : data.name}}</span>
                        </span>
                      </el-tree>
                    </div>
                  </div>
                  <div slot="reference" class="btnStyle">
                    <el-button size="mini">点击选择公司成员</el-button>
                  </div>
                </el-popover>

                <div class="sel-input">
                  <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText"
                    size="mini"
                  >
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                  </el-input>
                </div>
                <div class="repeatUserStyle">
                  <span>常用转发人</span>
                  <el-tooltip class="item" effect="dark" content="点击添加常用转发人" placement="right">
                    <i class="el-icon-plus  cursor_pointer" @click="handleSetForwarderList"></i>
                  </el-tooltip>
                </div>
                <el-option hidden v-for="item in branchList" :key="item.id" :value="item.id" :label="item.name+'——'+item.deptName" style="height: auto" />
                  <el-tree
                    class="filter-tree"
                    data="forwardList2"
                    :props="defaultProps"
                    node-key="id"
                    show-checkbox
                    :default-expand-all="roleBoolean === true ? false : true"
                    :expand-on-click-node="true"
                    :filter-node-method="filterNode"
                    @check-change="handleCheckChange"
                    ref="tree"
                  >
                    <!-- :check-strictly="systemNodeFlag" -->
                  </el-tree>
              </el-select>

• 数据部分

filterText: "",
      filterTextAll: "",
      defaultProps: {
        value: "id",
        label: "name"
      },
      // 常用转发人数据
      forwardList2: [{
        id: "全选",
        name: "全选",
        string: "常用转发人",
        deptName: "全选",
        children: []
      }],
      branchList2: [{
        id: "全选",
        name: "全选",
        string: "公司成员",
        deptName: "全选",
        children: []
      }],
      selectedData: [], // 选中的节点
      systemNodeFlag:true,
      formInline1:{
        companyId:"",
        deptId:"",
        realName:"",
        roleId:""
      },
      companyList: [],
      deptList: [],
      popover: false,

// 可能有没有用的数据

• js部分

// 过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    filterNodeAll(value, data) {
      if (!value) return true;
      let filterRes = data.name.indexOf(value) !== -1 || data.deptName.indexOf(value) !== -1;
      return filterRes
    },
    // 点击tree组件的复选框节点触发
    handleCheckChange(data,checked) {
      if(checked === true) {
        if(data.id !== "全选") {
          this.addForm.departmentList.push(data.id)
          if(this.addForm.departmentList)
          this.SetArray(this.addForm.departmentList)
          this.$refs.tree.setChecked(data.id, true)
          this.$refs.tree1.setChecked(data.id, true)
        } else {
          // 解决过滤全选后的bug
          if(data.string === "常用转发人") {
            let checkKeys = this.$refs.tree.getCheckedKeys()
            checkKeys.forEach((i, n) => {
              let node = this.$refs.tree.getNode(i)
              if(!node.visible && node.checked) {
                this.$refs.tree.setChecked(i, false)
              }
            })
          } else {
            let checkKeys = this.$refs.tree1.getCheckedKeys()
            checkKeys.forEach((i, n) => {
              let node = this.$refs.tree1.getNode(i)
              if(!node.visible && node.checked) {
                this.$refs.tree1.setChecked(i, false)
              }
            })
          }
        }
        // this.$refs.tree.
      } else {
        if(this.addForm.departmentList.includes(data.id)) {
          this.addForm.departmentList.forEach((item, index, arr) => {
            if(item === data.id) {
              arr.splice(index, 1)
            }
          })
          this.$refs.tree.setChecked(data.id, false)
          this.$refs.tree1.setChecked(data.id, false)
        }
      }

      // if(data.id !== "全选") {
      //   this.$refs.select.toggleMenu()
      // } else {
      //   this.popover = false
      // }
    },
    // 下拉框清除项触发
    removeTagChange(val) {
      this.$refs.tree.setChecked(val, false)
      this.$refs.tree1.setChecked(val, false)
      this.$refs.select.blur()
      this.popover = false
    },
    // 点击删除全部
    clearSelect() {
      this.$refs.tree.setCheckedKeys([])
      this.$refs.tree1.setCheckedKeys([])
      this.addForm.departmentList = []
      this.popover = false
    },
    intClick() {
      this.$refs.inputRef.focus()
    },
    // 去重
    SetArray(arr) {
      this.addForm.departmentList = Array.from(new Set(arr))
    },

3. 注意的问题

• 两边树节点都需要联动效果

this.$refs.tree.setChecked(data.id, true)
this.$refs.tree.setChecked(data.id, false)
// 上面代码有

• element-ui树组件的问题（当树做过滤之后，再勾选树的父节点，会默认全选没有过滤的节点，导致后面做数据导入的时候，会将不需要的数据也导入到系统中）

解决方案

this.checkKeys.forEach((i,n) => {
  // el-tree过滤Selectall,全部都选择上 
  var node = this.$refs.tree.getNode(i)
  
  if(!node.visible && node.checked){ 
  
    //过滤隐藏and选中的节点。设置为false
    
    this.$refs.tree.setChecked(i,false);  
    
  }
});