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 判断是否多行溢出隐藏

posted @ 2023-05-17 13:54  seven&night  阅读(1550)  评论(0编辑  收藏  举报