layui数据表格动态cols（字段）动态变化

最新推荐文章于 2024-07-10 22:37:56 发布

扫地鼠Gordon

最新推荐文章于 2024-07-10 22:37:56 发布

阅读量3.6w

点赞数 2

分类专栏： vue 开发心得文章标签： layui数据表格动态cols（字段）动态变化

本文链接：https://blog.csdn.net/qq_28137309/article/details/94444135

版权

在处理按日期时间段查询的场景中，当需要根据后台返回的日期数据动态调整layui数据表格的cols（字段）时，可以将表格渲染封装到一个函数内。通过监听搜索提交事件，使用动态传递的cols_arr数组作为字段输入。值得注意的是，直接重载表格的cols属性可能无法实现变化，解决方法是在重载前调用这个自定义的渲染函数，确保cols能够正确更新。

摘要由CSDN通过智能技术生成

如搜索查询时，常会遇到按日期时间段查询，并显示查询的每个日期的数据，后台拼装数据此处不讨论。

把表格渲染封装在函数里面，cols_arr是传入的字段数组

function tableRender(cols_arr){
    table.render({
        elem: '#demo'
        , url: 请求地址 //数据接口
        , method: 'post'
        , page: true //开启分页
        , cols: cols_arr
        , id: 'demo'
        , limit: 10
        , limits: [10, 20, 50, 100, 200, 500]
        , done: function (res) {}
    });
}

监听搜索提交

// 搜索
form.on('submit(demo1)', function (obj) {
    var start_date = obj.field.start_date;
    var end_date = obj.field.end_date;
    if (start_date != '' && end_date != ''){
        var all_date = getAll(start_date, end_date);
        if ( all_date.length>7){
            layer.msg('查询天数不得超过7天', {icon: 2, anim: 6});
            return false;