【无标题】layui表格内嵌下拉框（select）以及回显

原创已于 2022-11-01 17:20:14 修改 · 5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #layui

于 2022-11-01 17:16:56 首次发布

本文介绍如何在layui框架中实现表格内嵌下拉框选择器，并确保其正常显示，同时提供了表格内select元素的数据回显方法。通过自定义CSS样式和JavaScript代码，可以解决下拉框在layui表格单元格中的布局问题。

1.下拉框需要添加css不然显示不出来

.layui-table-cell {
    overflow: visible;
    }
    .layui-table-box {
    overflow: visible;
    }
    .layui-table-body {
    overflow: visible;
    }
    .layui-form-select dl dd{
      text-align: left;
    }

2.表格内嵌select

 {field: "authlevel", title: "层级",width:135,align: 'center' ,templet:function (data) {
       return `
        <select name='authlevel' lay-filter='authlevel' id='authlevel' data-value='${data.level}'>
                <option value='0'>1层级</option>
                <option value='1'>2层级</option>
                <option value='2'>3层级</option>
                <option value='3'>4层级</option>
       </select>`
 }},

3.表格select回显

done:function(res,curr,count){
  count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');
   layui.each($('select'), function (index, item) {
         var elem = $(item);
         elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
   });
  form.render();
}