使用elementui + table popover弹出框最后一行不弹出问题

在element-ui的table中使用popover弹出框会遇到表格最后一行不弹出的问题

 

解决方法：

 1、将popover外放为一个单独的组件：

//popoverCom组件代码
<template>
  <div>
    <el-popover placement="top-start"
                ref="popover"
                :width="width"
                :content="scope.row[propsName]"
                trigger="hover">
      <div slot="reference"
           v-popover:countPopover
           class="overflow_hidden">{{scope.row[propsName]}}</div>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: {
    scope: Object,
    propsName: String,
    width: Number,
  },
};
</script>
<style scoped>
.overflow_hidden {
  height: 23px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

2、引用这个组件

<template>
    <div>
        <el-table ref="multipleTable" :data="articlelList">
            <el-table-column align="center" label="标题" width="450">
                <template slot-scope="scope">
                    <PopoverCom :scope="scope" :propsName="'title'" :width="430">                               
                    </PopoverCom>
                </template>
            </el-table-column>
        </el-table>
    </div>
</temaplate>

<script>
import PopoverCom from "../../components/popoverCom";
export default {
  components: {
    PopoverCom,
  },
}
</script>