iview table 表格實現 單列超出隱藏 鼠標懸浮出現詳情

效果圖

直接複製粘貼下面代碼 就可以

{
            title: '交易訂單號',
            align: 'center',
            key: 'id',
            minWidth: 120,
            render: (h, params) => {
              let texts=params.row.id;   //這裏的params.row.id  是  key值
              if(params.row.id !=null){
                if(params.row.id.length>20){
                  texts=params.row.id.slice(0,9)+'...'  //進行數字截取
                }else{
                  texts=params.row.id
                }
              }
              return h('div', [
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    transfer: true
                  }
                },[texts,h('span',{
                  slot:'content',
                  style:{
                    whiteSpace:'normal'
                  }
                },params.row.id)
                ])
              ])
            }
          },