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>