a-table组件设置表头鼠标移入悬浮显示_a-table鼠标移上去提示-优快云博客

本文链接：https://blog.youkuaiyun.com/dongwei666/article/details/125850875

在AndDesignVue项目中，针对a-table组件，通过手动操作DOM为表头添加title属性，实现了鼠标悬停时表头内容悬浮展示的功能。在表格配置项columns基础上，动态遍历并设置th元素的title，成功解决了API未提供直接解决方案的问题。

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

问题描述

项目中使用的是And Design Vue 组件库，表格使用的是a-table组件。需求提出鼠标移入表头的时候，表头内容要悬浮展示。在API找了半天也没有找到相关设置的API，于是决定自己手动实现。
此表格为例: 操作栏设置的是右固定且每行数据可选

解决方案：

为每一个th设置title属性，但是代码中没有th标签，
我们只能手动去获取DOM元素th，只需要给每个th标签添加title属性即可。

  mounted() {
	// 当我们打印 domList 时会发现它的长度为8
	// 可table只有6个标头，在加上可选框才7个
	// 因为我们设置`操作栏`为右固定，所以就多了个重复的`操作栏`
    const domList = document.querySelectorAll('.ant-table-thead th')
    console.log(domList)
    // domList是一个类数组,先把它转为数组
    const newThead = [...domList]
    // 删除数组第一项'可选框'
    newThead.shift()
    // 删除数组最后一项重复的`操作栏`
    newThead.pop()
    // 为剩下的每一个th设置title属性
    // this.columns是table的配置项
    newThead.forEach((item,idx)=>{
      item.setAttribute('title',this.columns[idx].title)
    })
  },