1.html

<form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-inline">
                    <select class="layui-select" lay-affix="clear" id="status" name="status" autocomplete="off">
                        <option value="">全部</option>
                        <option value="wait" selected>待审核</option>
                        <option value="approve">审核通过</option>
                        <option value="disapprove">审核不通过</option>
                    </select>
                </div>   

                <button class="layui-btn" id="queryButton" lay-submit lay-filter="query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
            </div>
        </form>

2.script

<script>
    let queryParam = ${QOJSON};

    layui.use(function () {
        var form = layui.form;
        var table = layui.table;         

        let url = '${contextPath}/record/query';
        let cols = [
            [
                {
                    title: '序号',
                    type: 'numbers',
                },            
                {
                    title: '姓名',
                    field: 'name',
                    width: 100
                },            
                {
                    title: '手机号',
                    field: 'mobile',
                    width: 130
                },              
             
                {
                    title: '状态',
                    field: 'status',
                    templet: '{{statusValue(d.status)}}',
                    width: 100
                },
                {
                    title: '操作',
                    toolbar: '#record-toolbar',
                    width: 180
                }
            ]
        ];

        //  queryParam.status 未定义，初始化查询 使用 select 的默认选中值 "wait"
        queryParam.status = document.querySelector('#status').value;
        table.render({
        elem: '#pageTable',
        method: 'post',
        url: url,
        cols: cols,
        contentType: 'application/json',
        where: queryParam,
        request: {
            pageName: 'pageNo',
            limitName: 'pageSize'
        },
        toolbar: '#table-toolbar',
        defaultToolbar: ['filter'],
        parseData: function (res) {
            return {
                "code": res.code,
                "msg": res.message,
                "count": res.data.totalCount,
                "data": res.data.list
            };
        },
        page: true
    });

        // 删除queryParam.status属性，防止影响表单查询条件赋值
        delete queryParam.status
        form.on('submit(query)', function (data) {
        table.reload('pageTable', {
            where: {...removeEmptyValues(data.field), ...queryParam},
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            page:{
                curr: 1
            }
        });

        return false;
    });
      
    });

function removeEmptyValues(obj) {
    return Object.keys(obj)
        .filter(key => obj[key] != null && obj[key] !== '') // 过滤掉空值和未定义的值
        .reduce((result, key) => {
            result[key] = obj[key];
            return result;
        }, {});
}

</script>