前端elementui抽屉问题

Question

为什么我的抽屉时这种样子的？是样式问题还是因为我的抽屉写在循环内，点击一次出现了多个抽屉的原因？
cardList内一共有12个对象，求解惑

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

根据你提供的信息，你的抽屉问题可能是因为你在循环内写了多个抽屉，导致点击一次出现了多个抽屉。为了解决这个问题，你可以尝试将抽屉的v-for循环放在外层容器上，而不是直接放在抽屉组件上。这样，每次点击时只会触发一个抽屉。

你可以修改代码如下：

<template>
  <div>
    <el-row style="..">
      <!--卡片左侧-->
      <el-col :span="16">
        <!--卡片数据编辑-->
        <div v-for="(item, index) in cardList" :key="index">
          <el-popover>
            <div class="btn-style">
              <el-card>
                <div>
                  <el-row class="row top">
                    <el-col class="isYUgu">
                      ...
                    </el-col>
                    <el-col :span="6" v-for="(item, index) in cardList" :key="index">
                      <div>
                        <i class="iconfont icon-bianji" style="color: #12C96A; font-size: 20px" @click="compileCard(item)"></i>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </div>
          </el-popover>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

这样修改后，每次点击只会触发一个抽屉，不会出现多个抽屉的问题。