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

Question

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

代码如下：

<template>
    <el-table :data="tableData" style="width: 100%">
        <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" style="width: 100%">
                    <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嵌套导致的结果，该怎么调整呢？

效果图如下：

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

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