iview中使用table组件时单元格数据溢出省略号及tooltip


目标:

 

 代码:js部分

{
            key: 'discDetail',
            title: '个人介绍',
            render:(h,params)=>{
              return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'top',
                  transfer: true
                },
                style:{
                  display: 'inline-block',
                 width: '100%',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
                 borderColor:"1px",
                 borderWidth:'red'
                }
              }, [params.row.discDetail, h('span', {
                slot: 'content',
                style: {
                  whiteSpace: 'normal',
                }
              }, params.row.discDetail)
              ])
            ])
            }
          },
css部分:
/deep/ .ivu-tooltip-rel{
  display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
分析:在尝试单元格内容溢出样式时无论如何尝试都难以将样式填充进入

 

 ,尝试重定义样式成功

特此记录


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM