关于element-ui popover组件通过数据渲染出多个popover时点击取消时 popover的显示与隐藏问题

瞧这！

已于 2022-03-04 15:34:04 修改

阅读量905

点赞数

分类专栏： vue 文章标签： vue

于 2022-03-04 15:31:34 首次发布

本文链接：https://blog.csdn.net/weixin_41931970/article/details/123277782

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引用作者https://blog.csdn.net/Gunahao/article/details/79491879

      </el-table-column>**`el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="editorRow(scope.$index, tableData)"
            type="primary"
            size="small"
          >
            编辑
          </el-button>
                    <el-popconfirm
                        placement="bottom"
                        width="160"
                        trigger="click"
                        v-model="scope.row.visible"
                        title="确认删除吗？"
                    >
                      <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="scope.row.visible=false">取消</el-button>
                        <el-button type="primary" size="mini" @click="
                        scope.row.visible=false">确定</el-button>
                      </div>
                      <el-button slot="reference" size="small" @click="scope.row.visible=true">删除</el-button>
                    </el-popconfirm>
        </template>
      </el-table-column>`

  **思路：当数据数据是自定义时，我们可以在每个条数据对象中添加一条属性visible： false**

tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          visible: false
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          visible: false
        }]

给操作按钮添加 slot= "reference"s属性控制popover的现实，且将v-model中的值设为tableData中的visible值。点击取消或确定也要讲对应数据中的visible设为false并处理相关逻辑。若数据为后台返回。可在使用数据时遍历一遍数据，并给每条数据添加一个标识为false即可,到此问题解决了