【无标题】动态表头设置超出隐藏，鼠标悬停提示,不超出不提示

冯彦祖

已于 2023-12-20 16:41:51 修改

阅读量199

点赞数

文章标签： vue.js javascript 前端

于 2023-03-27 14:33:19 首次发布

本文链接：https://blog.csdn.net/weixin_70573795/article/details/129794811

版权

 <el-table-column v-for="(item,i) in tableData" :key="i" v-overflow-tooltip :fixed="i===0" :label="item.headName" :prop="item.headColumn" align="center">
          <template v-slot:header="scope">
            <div @mousemove="onMouseOver('refName' + scope.$index)">
              <el-tooltip :content="scope.column.label" :disabled="isShowTooltip" placement="top">
                <div class="text-truncate">
                  <span :ref="'refName' + scope.$index">{{ scope.column.label }}</span>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

//js部分
data(){
    return:{
        isShowTooltip:false
    }
}

methods:{

 onMouseOver (refName) {
      const parentWidth = this.$refs[refName][0].parentNode.offsetWidth
      const contentWidth = this.$refs[refName][0].offsetWidth
      // 判断是否开启tooltip功能
       this.isShowTooltip = !(contentWidth > parentWidth)
    },

}