vue antd a-table组件设置表头鼠标移入悬浮显示（自定义的表头）

1、看之前，请先异步另一篇文章 antdv table组件封装成全局组件以及携带自定义表头展示

2、具体需求，鼠标移入显示文本

3、参考大佬的文章：a-table组件设置表头鼠标移入悬浮显示

4、在公用子组件添加(因为父组件使用到v-if，所以需要使用到定时器)：

// tableBox.vue
onMounted(() => {
  setTimeout(() => {
    const domList = document.querySelectorAll('.ant-table-thead th');
    console.log(domList)
    // domList是一个类数组,先把它转为数组
    const newThead = [...domList]
    // 删除数组第一项'可选框'
    // newThead.shift()
    // 删除数组最后一项重复的`操作栏`
    // newThead.pop()
    // 只给最后一项添加title属性
    let newATitle = newThead.splice(newThead.length - 1);
    // 为剩下的每一个th设置title属性
    // this.columns是table的配置项
    newATitle.forEach((item)=>{
      item.setAttribute('title', '列表设置选择项')
    })
  }, 500);
})

5、最终效果：

不轻易放弃，总会看到希望的。