【layui】在table 内嵌入表单元素select

css

<style>
/* 设置下拉框的高度与表格单元相同 */
/* 防止下拉框的下拉列表被隐藏---必须设置--- */
#sq_body td .layui-form-select { margin-top: -3px; margin-left: -15px; margin-right: -15px; }
#sq_body td .layui-form-select .layui-input{ height: 32px; border: none; }
#sq_body td .layui-form-select dl{ min-width: 130px; position: fixed; bottom: auto; }
</style>

HTML

<table id="demo" lay-filter="test"></table>
<script type="text/html" id="table_select">
     <div class="table_jjzt" data-pid="{{d.id}}">
         <select lay-filter="filter">
             {{#  layui.each(d.compl_list, function(index, item){ }}
             <option value="{{item.id}}" {{d.compl_status==item.id ? 'selected':'' }}>{{item.name}}</option>
             {{#  }); }}
         </select>
     </div>
 </script>  

<script>
layui.use('table', function(){
	var table = layui.table;
  
	//第一个实例
	table.render({
		elem: '#demo'
		,height: 312
		,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
		,page: true //开启分页
		,cols: [[ //表头
			{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
			,{field: 'username', title: '用户名', width:80}
			,{field: 'sex', title: '性别', width:80, sort: true}
			,{field: 'city', title: '城市', width:80, templet: '#table_select'} 
			,{field: 'sign', title: '签名', width: 177}
			,{field: 'experience', title: '积分', width: 80, sort: true}
			,{field: 'score', title: '评分', width: 80, sort: true}
			,{field: 'classify', title: '职业', width: 80}
			,{field: 'wealth', title: '财富', width: 135, sort: true}
		]]
		,done: function (res, curr, count) {
			$(document).ready(function(){ 
				// 进件状态-select下拉框
				// ----加样式----给dl加position: fixed;计算left，top
				$('.table_jjzt').on('click', function(){
					var a=$(this).offset().left;
					$(this).next('.layui-anim.layui-anim-upbit').css("left", a-15);
					var s=$(this).outerHeight();
					var h=$(this).offset().top - window.pageYOffset;
					var r=$(this).next('.layui-anim.layui-anim-upbit').outerHeight();
					var o='';
					$(window).height()-$(this).offset().top <= 212 ? o=h-r:o=s+h;
					$(this).next('.layui-anim.layui-anim-upbit').css("top", o);
				});
			});
		}
	});
	// select选择
	form.on('select(filter)', function(obj){
		let _pid = $(obj.elem).parents('.table_jjzt').attr('data-pid');
	}); 
	
  
});
</script>