vue antd 表格行 td 鼠標移入出現滾動條，鼠標移出溢出隱藏

<script type="text/javascript">
  methods:{
     // 點擊事件 鼠標移入移除
    eventTouch(record,index){
      return {
        props: {
          
        },
        on: { // 事件
          mouseenter: (event) => { // 鼠標移入
            let tdList = event.target.childNodes
            let indexNum = index+1
            let tr=document.getElementsByTagName("tr")[indexNum]
            let trList=tr.childNodes;
            // 獲取節點
            for(let i=1;i<trList.length;i++){
              let td =trList[i]
              let typ=document.createAttribute("class")
              typ.nodeValue="mouseentered"
              td.attributes.setNamedItem(typ)
            }
          }, 
          mouseleave: (event) => {// console.log("鼠標移出")
            let tdList = event.target.childNodes
            let indexNum = index+1
            let tr=document.getElementsByTagName("tr")[indexNum]
            let trList=tr.childNodes;
            // 獲取節點
            // let td =trList[1]
             for(let i=1;i<trList.length;i++){
              let td =trList[i]
              td.attributes.removeNamedItem("class")
            }
          }
        },
      };
    },
  }
</script>
<style>
   .ant-table-tbody > tr > td{
     box-sizing: border-box;
     overflow: hidden;
     text-overflow: ellipsis; 
     white-space: nowrap;
     word-wrap:break-word;
     padding-left: 2px;
     padding-right: 2px;
     overflow-y: auto;
     // overflow-x:auto
   }
   .ant-table-tbody > tr >td.mouseentered{
     box-sizing: border-box;
     overflow: auto;
     text-overflow: clip; 
     white-space: nowrap;
     word-wrap:break-word;
     padding-left: 2px;
     padding-right: 2px;
     overflow-y: auto;
     overflow-x:auto
   }
  //   /* 滾動條的寬度 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  // /* 滾動條的滑塊 */
 ::-webkit-scrollbar-thumb {
   background-color: #a1a3a9;
   border-radius: 8px;
 }
</style>

　　

<a-table :customRow="eventTouch" :scroll="{ x: 1500, y: 1600 }"></a-table>