第一步,判断渲染的字段是否超过规定字符

实现这一步要用到作用域插槽,然后是参考table组件中自定义列的demo,就可以拿到
el-popover 这一个组件,这一个组件的使用就是,你要做哪一段文字的提示,你就把那一段文字放进el-popover 这一个组件中,代码写的比较详细啦

<el-table-column label="公司部门">
          <!-- 利用了作用域插槽,自定义了“公司部门”这一列 -->
	<template slot-scope="scope">
            <el-popover popper-class="area_popper" offset=-150 trigger="hover" :open-delay=0 :close-delay=0 placement="top" :disabled='isShowBox'>
                <!-- 提示的文字框,显示所有的部门信息 -->
                <p class="showText">{{ scope.row.corporate_sector }}</p>
                <!-- 利用三元表达式判断是否超过预期的长度 -->
                <div slot="reference" v-on:>{{ scope.row.corporate_sector.length > 20? scope.row.corporate_sector.slice(0, 20) + '...' : scope.row.corporate_sector}}</div>
            </el-popover>
	</template>
</el-table-column>

第二步,当鼠标经过时,判断是否要显示提示的信息

其实这一步就是,当鼠标经过这个字段时,要判断,该字段的长度是否超过规定的字符,超过的话,鼠标经过该字段,显示提示信息,没有超过该字段,不显示提示信息

<el-table
        :data="rosterList"
        :header-cell-style="getRowClass"
        @cell-mouse-enter="showBox"
        @cell-mouse-leave='hideBox'
        style="width: 100%"
        stripe
      >
 </el-table>

@cell-mouse-enter=“showBox”
@cell-mouse-leave=‘hideBox’ 要用到这两个事件,一个是鼠标某个单元格触发的事件,一个是鼠标离开某个单元格触发的事件,对应的处理函数代码如下:

// 鼠标经过显示盒子
    showBox: function (row, column, cell, e) {
      
      if(cell.cellIndex === 3 && e.target.innerText.length >= 20){
       this.isShowBox = false

      }
      else{
        this.isShowBox = true
        }
    },
    // 鼠标离开隐藏盒子
    hideBox:function(row, column, cell, e){
      this.isShowBox = true
    }

:disabled=‘isShowBox’ 就是控制提示框是否要显示,这个属性,要定义到data中
这样就实现了,功能
但是还有很多可以优化的地方,本人才疏学浅,还请各位大佬,多多指点;
比如,判断是否超过规定字符时,我在插值表达式中,写了三元表达式,这样显的代码太冗余,
大佬有没有优化的方案,分享一下

Logo

前往低代码交流专区

更多推荐