700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue antd a-table组件设置表头鼠标移入悬浮显示(自定义的表头)

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

时间:2022-09-11 10:54:43

相关推荐

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

1、看之前,请先异步另一篇文章 antdv table组件封装成全局组件以及携带自定义表头展示
2、具体需求,鼠标移入显示文本
3、参考大佬的文章:a-table组件设置表头鼠标移入悬浮显示
4、在公用子组件添加(因为父组件使用到v-if,所以需要使用到定时器):

// tableBox.vueonMounted(() => {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、最终效果:

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。