Vue ElementUI中 table单元格使用多个Popover解决多行溢出隐藏鼠标悬浮提示问题

Popover的简单介绍

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。

对于触发 Popover 的元素，有两种写法：使用 slot=“reference” 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

placement 弹框的出现位置

value / v-model 状态是否可见

hide/show 关闭/显示时触发的事件

table单元格嵌套Popover，@mouseenter @mouseleave 控制scope._self.$refs内的doShow()和doClose方法控制Popover显示隐藏

 

直接上代码

<el-table
                        :data="tableData_jobList"
                        @sort-change="sortChange"
                        empty-text="正在努力加载数据中，请稍后……"
                        :header-cell-style="{background:'#f9f9f9'}"
                        style="width: 100%">
                    <el-table-column
                            prop="title"
                            label="任务标题"
                            min-width="20%">
                        <template slot-scope="scope">
                            <div class="scope_row">
                                <el-popover  :ref="'popover-title'+scope.$index" trigger="manual"
                                             :content="scope.row.title" placement="right" popper-class="black">
                                    <div @mouseenter="visibilityChange($event,scope,'title')" @mouseleave="visibilityClose(scope,'title')" class="text" slot="reference">{{scope.row.title}}</div>
                                </el-popover>
                            </div>
                        </template>
                    </el-table-column>
                   
                    <el-table-column
                            prop="gradeName"
                            label="班级"
                            min-width="10%">
                        <template slot-scope="scope">
                            <el-popover  :ref="'popover-gradeName'+scope.$index" trigger="manual"
                                         :content="scope.row.gradeName" placement="right" popper-class="black">
                                <div @mouseenter="visibilityChange($event,scope,'gradeName')" @mouseleave="visibilityClose(scope,'gradeName')" class="text" slot="reference">{{scope.row.gradeName}}</div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="paperName"
                            label="试卷"
                            min-width="15%">
                        <template slot-scope="scope">
                            <el-popover  :ref="'popover-paperName'+scope.$index" trigger="manual"
                                         :content="scope.row.gradeName" placement="right" popper-class="black">
                                <div @mouseenter="visibilityChange($event,scope,'paperName')" @mouseleave="visibilityClose(scope,'paperName')"
                                         @click="clickPaper(scope.row.paperId,scope.row.systemtype)" slot="reference" class="main_blue text" style="cursor: pointer">{{scope.row.paperName}}</div>
                            </el-popover>

                        </template>
                    </el-table-column>
                </el-table>

methods:{
　　//因为一行用到了多个Popover所以ref需要加name区分
    visibilityClose(scope,name){
                    scope._self.$refs["popover-"+name+scope.$index].doClose()
                },
                visibilityChange(event,scope,name){
                    const ev = event.target; //获取div
                    if(ev.scrollHeight>ev.clientHeight){
                        scope._self.$refs["popover-"+name+scope.$index].doShow()
                    }else{
                        scope._self.$refs["popover-"+name+scope.$index].doClose()
                    }
                },        
}

获取dom根据scrollHeight和clientHeight 判断是否多行溢出隐藏