H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

需求:想要实现的效果,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嵌套导致的结果,该怎么调整呢?

效果图如下:

err1.pngerr2.png

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

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

本文地址:H5W3 » element组件table里面通过popover嵌套table出现bug?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址