给ant-design Table组件的column添加鼠标悬浮提示
ant-design Table组件
:
<template><a-table :columns="columns" :data-source="data"></a-table></template><script>export default {data() {return {data:[{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',},]columns:[{title: 'name',dataIndex: 'name',key: 'name',ellipsis:true},{title: 'Age',dataIndex: 'age',key: 'age',ellipsis:true},{title: 'Address',dataIndex: 'address',key: 'address',ellipsis:true},]};},};</script>
给Table的column添加鼠标悬浮提示
:
this.$nextTick(()=>{var rowsDom = document.getElementsByClassName("ant-table-row-cell-break-word");rowsDom.forEach(item1=>{if(item1.nodeName === "TD"){item1.setAttribute("title",item1.textContent)}})var tableHeadDom = document.getElementsByClassName("ant-table-thead");var colsDom = tableHeadDom[0].getElementsByClassName("ant-table-row-cell-ellipsis");colsDom.forEach(item=>{item.setAttribute("title",item.textContent)})})