给ant-design Table组件的column添加鼠标悬浮提示

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