<table id="demo" lay-filter="test"></table> <script> layui.use(['table', 'jquery', 'form'], function () { var table = layui.table; var form = layui.form; var $ = layui.jquery; var tableObject; //第一个实例 tableObject = table.render({ elem: '#demo' , height: 500 , url: 'http://localhost:8080/findAll' //数据接口 //, page: true //开启分页 , method: 'post' //提交方式 get/post , toolbar: true //开启表头工具栏 , cols: [[ //表头 {field: 'name', title: '名称',align:'center'} , {field: '', title: '号码',templet:function(d){ return '<select name="city" lay-verify="required">\n' + ' <option value=""></option>\n' + ' <option value="1001">1号</option>\n' + ' <option value="1000">2号</option>\n' + ' </select>'; },align:'center'} , {field: 'dataDesc', title: '保存',templet:function (d) { return ' <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">保存</button>'; },align:'center'} ]] ,done: function (res, curr, count) { //数据渲染完的回调。 //由于layui 设置了超出隐藏,所以这里改变下,以兼容操作按钮的下拉菜单 $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible'); } }); }) <script>
由于layui自带的样式中定义的表格高度会自动隐藏下拉框内容,所以要加上,上面代码里已经加上了,加上下面这段代码问题解决
,done: function (res, curr, count) { //数据渲染完的回调。 //由于layui 设置了超出隐藏,所以这里改变下,以兼容操作按钮的下拉菜单 $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible'); }