vue项目遍历el-popover
<template> <div> <el-table :data="tableData" tooltip-effect="dark" size="small" > <el-table-column label="名称"> <template slot-scope="{row}">{{ row.name }}</template> </el-table-column> <el-table-column> <template slot-scope="scope"> <el-popover popper-class="b-r-10" placement="bottom-end" width="180" trigger="click" :ref="'popover-' + `${scope.$index}`" > <p class="text-center">请确定是否删除该数据？</p> <div class="text-center"> <el-button type="primary" size="mini" @click="handleRow(scope.row);scope._self.$refs['popover-' + `${scope.$index}`].doClose()" >确定</el-button> <el-button size="mini" @click="scope._self.$refs['popover-' + `${scope.$index}`].doClose()" >取消</el-button> </div> <el-button type="text" slot="reference" >删除数据</el-button> </el-popover> </template> <template slot-scope="scope"> <el-popover popper-class="b-r-10" placement="bottom-end" width="180" trigger="click" :ref="'popover-' + `${scope.$index}`" > <p class="text-center">请确定是否删除该数据？</p> <div class="text-center"> <el-button type="primary" size="mini" @click="handleRow(scope.row);scope._self.$refs['popover-' + `${scope.$index}`].doClose()" >确定</el-button> <el-button size="mini" @click="scope._self.$refs['popover-' + `${scope.$index}`].doClose()" >取消</el-button> </div> <el-button type="text" slot="reference" >删除数据</el-button> </el-popover> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '数据1' }, { id: 2, name: '数据2' }, { id: 1, name: '数据1' } ] }; }, methods: { handleRow(row) { console.log(row) } } }; </script>