<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
element官网的这段代码在el-table中生效,但是在
<el-table-column type="expand" height="250">
<el-popover
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
</el-table-column>
中不生效
解决方案
<el-table-column type="expand" height="250">
<template slot-scope="props">
<el-popover ref="'popover-'+props.$index" placement="top-start" title="标题" width="200" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" trigger="hover">
<el-image :src="src" slot="reference" style="width: 100px; height: 100px" alt >
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</el-popover>
</template>
</el-table-column>
增加
<template slot-scope="props">
</template>
原因分析
在extend中,展开行需要起一个别名,来对应里面不同的数据