解决Vue + element table表格与popover弹出框结合使用时最后一行无法弹出的问题

解决Vue + element table表格与popover弹出框结合使用时最后一行无法弹出的问题

问题描述

用element的table与popover结合使用的时候会出现最后一行的无法触发页面popover的弹出框

    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" label="日期" width="180">
            <template slot-scope="scope">
                <el-popover align="center" ref="countPopover" placement="right"   width="200" trigger="click">
                    <span>{{scope.row.name}}</span>
                </el-popover>
                <span v-popover:countPopover >{{scope.row.name}}</span>
            </template>
      </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>

解决过程

后来我查阅element的官方文档，发现还有另外一种编写方式

修改后的代码

    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" label="日期" width="180">
            <template slot-scope="scope">
                <el-popover align="center" ref="countPopover" placement="right"   width="200" trigger="click">
                    <span>{{scope.row.name}}</span>
                    <!-- 调用popover内部的reference插槽 -->
                    <span slot="reference"  v-popover:countPopover >{{scope.row.name}}</span>
                </el-popover>
            </template>
      </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>

修改后最后一行果然可以渲染了，但是问题更大了，除了最后一行其他行都无法正常渲染，如下图所示

完整代码

我便思考会不会是由于渲染点击事件的时候，当前的弹框内容还未加载的问题导致的，便想利用Vue组件隔离渲染的机制来尝试着解决这一问题,修改后完整代码如下

<template>
  <div id="tableAndPopover">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" label="日期" width="180">
            <template slot-scope="scope">
                <popoverCom :scope="scope" :propsName="'name'"></popoverCom>
            </template>
      </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>
  </div>
</template>

<script>
/* eslint-disable */
import popoverCom from "@/components/popoverCom.vue"
export default {
    name: 'tableAndPopover',
    data(){
        return{
            tableData: [{
                date: '2016-05-02',
                name: '王小1',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小2',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小3',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小4',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    components:{popoverCom},
    methods:{
    }
}
               
</script>
<style scoped >
</style>

popoverCom 组件代码

<template>
    <div>
        <el-popover align="center" ref="countPopover" placement="right"   width="200" trigger="click">
            <span>{{scope.row[propsName]}}</span>
            <!-- 调用popover内部的reference插槽 -->
            <span slot="reference" v-popover:countPopover >{{scope.row[propsName]}}</span>
        </el-popover>
    </div>
</template>

<script>
/* eslint-disable */

export default {
    name: 'tableAndPopover',
    data(){
        return{
        }
    },
    props:{
        scope:Object,
        propsName:String
    },
    methods:{
    }
}

</script>
<style scoped >
</style>

问题解决