利用el-tree实现搜索的联动功能

今天公司做项目碰见这样一个需求

点击搜索，出现搜索框，左中右出现联动效果一个选中，其他都选中，右侧出现选中的内容，搞了三天终于可以了

html
<el-card>
        <div class="distribution">
         <div class="people">
              <div class="search">
                <el-input
                  placeholder="请输入内容"
                  v-model="input3"
                  class="input-with-select"
                  @focus="focusHandle"
                  @change="searchMembers"
                  @blur="blurVal"
                  @input ="handleInput"
                >
                  <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </div>
              <div v-if="noData == true" class="no_data">
                <img
                  src="@/assets/images/searchUI.png"
                  width="144px"
                  height="122px"
                  alt=""
                />
                <span>暂无搜索结果</span>
              </div>
              <div
                class="infinite-list-wrapper"
                v-show="searchFlag"
                style="height: 359px"
              >
                <ul class="list" style="overflow: auto; height: 330px">
                  <li v-for="(item, index) of searchData" :key="index">
                    <el-checkbox-group
                      v-model="checkedBox"
                      @change="getSelected(item)"
                    >
                      <el-checkbox :label="`${item.id}`">
                        {
  {
                          `${item.lastName}${item.firstName}(${item.userNo})`
                        }}
                        <br />
                        <span>{
  { item.org1 }}</span>
                        <span v-if="item.org2 != null">/{
  { item.org2 }}</span>
                        <span v-if="item.org3 != null">/{
  { item.org3 }}</span>
                        <span v-if="item.org4 != null">/{
  { item.org4 }}</span>
                        <span v-if="item.org5 != null">/{
  { item.org5 }}</span>
                        <span v-if="item.org6 != null">/{
  { item.org6 }}</span>
                      </el-checkbox>
                    </el-checkbox-group>
                  </li>
                </ul>
                <p
                  v-if="searchData.length >= 20"
                  style="text-align: center; cursor: pointer; width: 100%"
                  @click="loadHandle"
                &