其他分享
首页 > 其他分享> > iview table 表格 实现 单列超出隐藏 鼠标悬浮出现详情(render函数)

iview table 表格 实现 单列超出隐藏 鼠标悬浮出现详情(render函数)

作者:互联网

效果图

在这里插入图片描述

{
  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)
      ])
    ])
  }
}

标签:render,texts,params,key,table,iview,id,row
来源: https://www.cnblogs.com/AAABingBingBing/p/14755062.html