element UI Popover组件遍历

<template>
    <div>
        <el-table
            stripe
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
        >
            <el-table-column label="名称" width="240">
                <template slot-scope="{row}">{{ row.name }}</template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                    <el-popover
                        popper-class="popover-class"
                        placement="bottom-end" 
                        width="180"
                        trigger="click"
                        :ref="'popover-' + `${scope.$index}`"
                    >
                        <p>请确定是否删除？</p>
                        <div>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="deletData(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" } ] };
    },
     methods: {
         deletData() {}
     }
};
</script>