【Vue】element ui的 popover弹框问题

Z时代
2024-01-10
分类：技术分享

需求是在table表格中，商品如果有关联商品，可以点击查看，代码和截图如下

<el-table-column
prop="sku"
label="库存SKU"
sortable
show-overflow-tooltip
width="240">
<template slot-scope="scope">
<el-popover
ref="popover"
placement="top"
width="750">
<el-table :data="scope.row.processArr">
<el-table-column width="250" property="dependencySkuId" label="库存SKU"></el-table-column>
<el-table-column width="400" property="skuNameZh" label="产品名称"></el-table-column>
<el-table-column width="50" property="quantity" label="数量"></el-table-column>
</el-table>
</el-popover>
<a @click="editFn(scope.row)">{{scope.row.sku}}</a>
<i class="el-icon-circle-plus-outline" v-popover:popover v-if="scope.row.processArr.length > 0"></i>
</template>
</el-table-column>