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

原创已于 2023-12-20 16:41:51 修改 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

这篇文章展示了如何在Vue.js中使用<el-table-column>组件动态渲染表格数据，并通过v-for指令遍历tableData。当列头名称过长时，利用v-overflow-tooltip和自定义方法onMouseOver启用固定Tooltip，通过计算内容宽度和父元素宽度来决定是否显示Tooltip，以实现更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <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)
    },

}