天天看點

解決layui資料表格中嵌套下拉框顯示問題

在layui資料表格中嵌套下拉框時,下拉框不能正常彈出,仔細觀察發現,點選下拉框時會有一個短暫的彈出動畫,馬上又消失了,遂猜想,大概是顯示的問題,可能是被覆寫了,那麼解決覆寫就可以了。

如圖,

解決layui資料表格中嵌套下拉框顯示問題

下拉框已經彈出,隻是沒有正常顯示 

解決方法非常簡單,隻需在table渲染方法中添加如下代碼即可,

done: function (res, curr, count) {
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
            }
           

table渲染代碼

table.render({ //其它參數在此省略
  height: 'full-50',
  done: function (res, curr, count) {
     $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow','visible');
  }
}); 
           

因為layui的樣式沖突導緻表格顯示在下拉框的上方,是以你需要(為select标簽)設定樣式使得select标簽顯示在上層。

附:

thead中的填寫

解決layui資料表格中嵌套下拉框顯示問題

tbody的tr内容,是一個完整的下拉框

解決layui資料表格中嵌套下拉框顯示問題