layui数据表格动态cols(字段)动态变化

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

把表格渲染封装在函数里面,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;
        }
        window.cols_arr[0] = [];
        window.cols_arr[0][0] = {field:'group_id', title: '群号', align: 'center'};
        all_date.forEach(function(value,i){
            window.cols_arr[0][i+1]=({field: value, title: value, align: 'center'})
        })
    }
    tableRender(window.cols_arr);
    table.reload('demo', {
        page: {
            curr: 1
        },
        where: {
            all_date: all_date
        }
    });
    return false;
});

如果只是重载,cols属性不会改变,解决思路:重载前执行一次封装了渲染的函数,也就是tableRender();用全局变量或传参的形式都行

你可能感兴趣的:(vue,开发心得)