layui table 行内下拉框select不显示的解决办法

        table.render({
            elem: '#shifts_time',
            id:'shifts_time',
            height: 'full',
            data: shiftsData0,
            title: '班组成员',
          //  height: 'full-290',
            toolbar: '#toolbar',
            defaultToolbar: [],
            page: false,
            loading: false,
            even: false,
            cols: [[ //标题栏
                {type: 'checkbox',},
                {field: 'shifts', title: '班次', width: 180, align: 'center'},
                {field: 'tim', title: '开始时间', align: 'center',width:250,
                    templet: function (d) {
                        var opt =
                            '<select name="shifts_time"  lay-filter="shifts_time" lay-verify="required">' +
                            '<option value="">请选择时间</option>';
                        $.each(d.time_list, function (i, item) {
                            opt += '<option value = "' + item.time + '">' + item.time +'</option>'
                        });
                        opt += '</select>';
                        return opt;
                    } },
                {event: 's_time',field: 's_time', title: '结束时间', align: 'center', width: 250,
                    templet: function (d) {
                        var opt =
                            '<select name="shifts_time"  lay-filter="shifts_time" lay-verify="required">' +
                            '<option value="">请选择时间</option>';
                        $.each(d.time_list, function (i, item) {
                            opt += '<option value = "' + item.time + '">' + item.time +'</option>'
                        });
                        opt += '</select>';
                        return opt;
                    }
                },
   
                {field:'notes', title:'备注'},
            ]], 
           
 });

经查找，终于知道，只需更改CSS样式就可以解决问题

  .layui-table-cell {
        overflow: visible;
    }
`

结果如下：