iview表格的表头使用悬浮提示框被遮挡解决方法

最近在做一个项目时,因为需要提示用户具体表格的算法,但因提示内容太长,在表格中hover提示影响美感,所以决定在表头上加图标hover提示,就用Vue的renderHeader函数添加。于是出现了一个bug,表头悬浮窗被遮挡如图:

解决办法:给表头列的render函数props对象添加一个transfer:true,问题解决,如下:

代码如下:

{
   // title: '扎帐及时率',
   // key: 'ZZJSL',
   slot: 'ZZJSL',
   renderHeader: (h, params) => {
     return h('Tooltip', {
        props: { 
           placement: 'top',
           transfer:true,//首先提示框一直被th遮挡,添加此属性后就不在被遮挡
      'max-width':"200"//设最大宽度,添加此属性后文字太长会换行,否则浮窗里只会显示一些文字,多余的文字在浮窗外且看不见
    }
   }, [
          h('span', [
             h('span', '扎帐及时率'),
             h('Icon', {
                props:{
                   type:'md-help-circle'
                },
                style:{
                   maginLeft:'20px'
                },
                // on: {
                //     click: () => {
                //         alert("qewrewr")
                //     }
                // }
              })
            ]),
            h('span', {
               slot: 'content',
              }, '停用后信息将不再显示在前端页面')
            ])
              },
      width: '250',
      resizable: true,
      tooltip: true,
      align: 'center'
},

 

posted @ 2021-08-12 16:40  我不是习小贵  阅读(1080)  评论(0编辑  收藏  举报