1. 程式人生 > 其它 >iview表格的表頭使用懸浮提示框被遮擋解決方法

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遮擋,新增此屬性後就不在被遮擋 } }, [ 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' },