layui 表格中加入下拉选择框

layui嵌套下拉框（亲测可以）效果图

1. 我们设置一下下拉框的样式，进行美化一下

/* 设置下拉框的高度与表格单元相同 */
   td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }

2. 我们在表单的状态字段那一栏设置下拉框 在cols里添加

,{field:'logins', title:'考勤状态', templet: function (d) {
               	return '+ d.logins + '" data-value="' + d.id + '" >' +
                  		'        请选择' +
                      '         出勤' +
                      '         迟到' +
                      '         旷工' +
                      '         待服务' +
                      '         出勤' +
                      '    ';
           } 
           ,  width: 100}
           /**
           不了解的话可以去layui官网查看表格示例
           */

3*选择完下拉框把值带到列表中

//考勤状态改变
       form.on('select(stateSelect)', function (data) {//修改类型
           let id = data.elem.dataset.value; //当前数据的id
           let logins = data.elem.value; //当前字段变化的值
           //修改状态
           //....这里省略一个ajax请求...
          // 传值：表单变化后的值传递到后台数据库进行实时修改，例如，根据id修改这条数据的状态。
       });

我们要刷新表格，并且去掉数据表格对select的隐藏，把select浮现在最外层 在table.render中添加

 , done: function (res, curr, count) {
        	  //设置下拉框样式在表格之上 不会遮挡下拉框
        	  $(".layui-table-body").css('overflow','visible');
        	  $(".layui-table-box").css('overflow','visible');
        	  $(".layui-table-view").css('overflow','visible');
        	  
              var tableElem = this.elem.next('.layui-table-view');
              count || tableElem.find('.layui-table-header').css('overflow', 'auto');
              layui.each(tableElem.find('select[name="logins"]'), function (index, item) {
                  var elem = $(item);
                  elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
              });
              form.render();//刷新表单
          }

注意
如果出现下图情况

//设置下拉框样式在表格之上 不会遮挡下拉框
        	  $(".layui-table-body").css('overflow','visible');
        	  $(".layui-table-box").css('overflow','visible');
        	  $(".layui-table-view").css('overflow','visible');