【Vue】element组件table里面通过popover嵌套table出现bug?

需求：想要实现的效果，table中有一列需要hover效果，弹出一个table显示更加详细的信息表格。

代码如下：

<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="score" label="分数">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<el-table :data="scope.row.score">
<el-table-column prop="category1" label="日期" width="180"></el-table-column>
<el-table-column prop="category2" label="姓名" width="180"></el-table-column>
<el-table-column prop="category3" label="地址"></el-table-column>
</el-table>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">分数列表</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: 'test',
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄', score: [
{'category1': 23, 'category2': 44, 'category3': 45}
]},
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄', score: [
{'category1': 53, 'category2': 44, 'category3': 45}
]},
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄', score: [
{'category1': 73, 'category2': 44, 'category3': 45}
]},
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄', score: [
{'category1': 83, 'category2': 44, 'category3': 45}
]}
]
}
},
}
</script>

bug描述：

在tag分数列上鼠标上下移动，是可以正常显示table表格的，但是操作过后，在其他列上看hover效果时，高亮的最后操作列和前面的列不在一整行，应该时table嵌套导致的结果，该怎么调整呢？

效果图如下：

【Vue】element组件table里面通过popover嵌套table出现bug?【Vue】element组件table里面通过popover嵌套table出现bug?

补充：
1、出现这个问题的原因主要是因为操作列设置了fixed="right"属性，但这又是必须的（需要设置此属性）；
2、自己想到了一种解决方式，每一行的详细列通过动态设置属性来控制显示隐藏（通过v-if）虽然可以做到，但是仍不理想，在某些操作的时候仍会出现上图的情况；

所以现在想把详细table拆解出来，不要嵌套到table里面，但是目前没有找到方式！

回答

以上是 【Vue】element组件table里面通过popover嵌套table出现bug? 的全部内容， 来源链接： utcz.com/a/75647.html

回到顶部