element ui的cascader多选模式弹框异常关闭

问题：在多选模式下选择一个选项后，弹框自动关闭，其他功能正常；（正常情况下，能够连续多选选项）
解决：cascader是遍历出来的，遍历时的:key使用随机值，v-for 用了 :key="Math.random()+fIdx"。

每次渲染生成新随机 key,导致勾选一个选项后(flow.selAddrIds 赋值引发重渲染)整个流程列表连同 cascader 一起被销毁重建,下拉面板因此立即关闭;数据因为赋值在先,回显正常

          <div
            :class="[
              'flow-item',
              fIdx === 0
                ? 'left-edge'
                : fIdx === approvalFlowList.length - 1
                  ? 'right-edge'
                  : '',
              approvalFlowList.length > 1 ? 'show-h-line' : '',
            ]"
            v-for="(flow, fIdx) in approvalFlowList"
            :key="fIdx">
            <div style="height: 20px">
              <img
                v-show="approvalFlowList.length > 1"
                class="flow-item-change-icon"
                src="../../../assets/icon-delete.png"
                @click="changeFlowList(false, fIdx)" />
            </div>
            <el-form
              style="
                box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
                margin: 5px;
                padding-top: 5px;
              "
              label-position="right"
              label-width="100px">
              <el-form-item :label="$t('区域')">
                <div class="flex-center" style="margin-top: 5px">
                  <el-cascader
                    ref="accAddrCascader"
                    v-model="flow.selAddrIds"
                    size="mini"
                    :placeholder="$t('请选择区域')"
                    style="width: 220px"
                    :options="acceptanceAddr"
                    :props="{
                      multiple: true,
                      label: 'name',
                      value: 'strId',
                      children: 'buildingAndFloor',
                      emitPath: false,
                    }"
                    collapse-tags
                    @visible-change="handleAddrShowPanel($event, flow)"
                    clearable>
                    <template slot-scope="{ node, data }">
                      <span :title="data.name.length >= 20 ? data.name : ''">{{
                        data.name.length >= 20
                          ? data.name.slice(0, 15) + "..."
                          : data.name
                      }}</span>
                    </template>
                  </el-cascader>
                  <!-- <el-tooltip class="item" effect="dark" placement="bottom-end">
                    <i
                      style="font-size: 24px; color: #999"
                      class="el-icon-warning-outline"></i>
                    <div slot="content">
                      <p>
                        {{$t('区域为空时,当工单存在此流程设置的“对象”，且工单不存在“区域”时，则走此流程')}}
                      </p>
                    </div>
                  </el-tooltip> -->
                </div>
              </el-form-item>
              <el-form-item style="margin-bottom: 0px;" v-for="(item, index) in flow.peopleFlow" :key="item.id" :label="item.nodeName">
                <div
                  class="flex-center flow-input"
                  style="align-items: flex-start">
                  <div
                    :style="{
                      position: 'relative',
                      'margin-bottom':
                        index != flow.peopleFlow.length - 1 ? '30px' : 0,
                    }">
                    <el-cascader
                      :disabled="item.publishConfirm"
                      v-model="item.selectPeople"
                      size="mini"
                      :placeholder="$t('请选择审核人')"
                      :class="{
                        'has-line': index != flow.peopleFlow.length - 1,
                        'appproval-input': true,
                      }"
                      :style="{ width: '220px', 'flex-shrink': 0 }"
                      :options="item.approvalPeople"
                      :props="{
                        multiple: true,
                        label: 'name',
                        value: 'strId',
                        children: 'userList',
                      }"
                      collapse-tags
                      @visible-change="
                        handleShowPanel(
                          $event,
                          item,
                          flow.peopleFlow
                            .reduce(
                              (pre, next) => [...pre, ...next.selectPeople],
                              [],
                            )
                            .flat(Infinity),
                        )
                      "
                      clearable>
                      <template slot-scope="{ node, data }">
                        <span
                          :title="data.name.length >= 20 ? data.name : ''"
                          >{{
                            data.name.length >= 20
                              ? data.name.slice(0, 15) + "..."
                              : data.name
                          }}</span
                        >
                      </template>
                    </el-cascader>
                  </div>
                  <div class="flex-center" style="height: 42px">
                    <el-popover
                      placement="right"
                      width="150"
                      trigger="click"
                      ref="addNodePopover">
                      <div>
                        <div
                          style="cursor: pointer;margin-bottom: 5px"
                          v-for="item in nodeList"
                          :key="item.strId"
                          @click="changePeopleFlow(true, index, fIdx, item)">
                          {{ item.nodeName }}
                        </div>
                      </div>
                      <img
                          slot="reference"
                          class="change-icon"
                          src="../../../assets/ico-add.png"/>
                    </el-popover>
                    <div style="width: 30px; display: flex; align-items: center">
                      <img
                      v-if="index > 0"
                      class="change-icon"
                      style="cursor: pointer"
                      src="../../../assets/icon-delete.png"
                      @click="changePeopleFlow(false, index, fIdx)" />
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>