iview表格的表頭使用懸浮提示框被遮擋解決方法
阿新 • • 發佈:2021-08-12
最近在做一個專案時,因為需要提示使用者具體表格的演算法,但因提示內容太長,在表格中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' },