关于在select中实现折叠下拉选项问题

 

 近期要实现这么一个功能，select下拉框中实现折叠，代码如下

  <el-select
      v-model="value"
      value-key="objectFullPath"
      popper-class="selectTree"
      size="mini"
      :style="{width: widthSize}"
      @change="changeValue($event)"
    >
      <div style="height:70px">
        <el-input v-model="input" size="mini" placeholder="请输入内容" />
        <!--循环遍历下拉框中的按钮-->
        <el-button v-for="(it,i) in tableTotal" :key="i" size="mini" @click="jumpClick('#group'+i)">{{ it.name }}
        </el-button>
      </div>

      <el-table
        header-cell-class-name="tableHeaderClass"
        :data="tableTotal"
        style="width: 100%;"
        row-key="objectFullPath"
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >

        <el-table-column
          class-name="tableColumn"
          prop="name"
          label=""
        >
          <template slot-scope="scope">
            <span v-if="scope.row.hasChildren">{{ scope.row.name?scope.row.name:scope.row.code }}</span>
            <el-option
              v-else
              class="optionClass"
              :value="scope.row"
              :label="scope.row.name?scope.row.name:scope.row.code"
            >
              <span>
                {{ scope.row.name?scope.row.name:scope.row.code }}
              </span>
              <!--<span class="clickTable"  @click="tableColumuclick(scope.row)">{{scope.row.name}}</span>-->
            </el-option>
          </template>

        </el-table-column>

      </el-table>
      
    </el-select>

这个折叠效果我采用el-table中的折叠，实现的话将el-table嵌套在select中，table中只有一列，在table-column中加入灵魂el-options,注意，如果是叶子结点（没有子项，最根级别），就用el-options来渲染，否则就自己写span渲染，这样就实现了折叠效果，