LayUI Table列的显示与隐藏:使用hide属性

时间:2022-10-19
LayUI Table列的显示与隐藏可以通过CSS样式来控制,但是效果不是很满意。这里我通过修改列hide属性后重载表格来实现个别列的显示与隐藏。
1.单独定义表格形式:
let cols1 = [
                    { type: 'numbers', title: '序号', width: 60, align: 'center' }
                    , { field: 'MerchantNo', title: '单位编号', width: 180, align: 'center' }
                    , { field: 'MerchantName', title: '单位名称', width: 180, align: 'center' }
                    , { field: 'Province', title: '省份', width: 120, align: 'center' }
                    , { field: 'Contacts', title: '联系人', width: 120, align: 'center' }
                    , { field: 'ContactPhp', title: '联系电话', width: 120, align: 'center' }
                    , { field: 'Fox', title: '传真', width: 100, align: 'center' }
                    , { field: 'EMail', title: '邮箱地址', width: 120, align: 'center' }
                    , { field: 'Address', title: '公司地址', width: 120, align: 'center' }
                    , { field: 'Synopsis', title: '公司简介', align: 'center' }
                    , { field: 'AdminCount', title: '允许账号数目', width: 100, align: 'center', hide: true }
                    , { field: 'Duetime', title: '有效期', width: 110, align: 'center', hide: true }
                    , { field: 'IsEnable', title: '状态', width: 100, align: 'center', templet: '#IsEnabledTpl' }
                    , { fixed: 'right', title: '操作', width: 125, align: 'center', toolbar: '#barOperation' }
            ];
2.根据需求修改列的属性:
var isReload = false;
                    if (res[0]['ShowOther'] == '0') {
                        if (!cols1[10].hide) {
                            isReload = true;
                        }
                        cols1[10].hide = true;
                        cols1[11].hide = true;
                    } else {
                        if (cols1[10].hide) {
                            isReload = true;
                        }
                        cols1[10].hide = false;
                        cols1[11].hide = false;
                    }
3.对表格重载:
if (isReload) {
                        insTb.reload({
                            cols: [cols1]
                        });
                    }
 
上一条:解决layui element树形表格全选失效,刷新保持原数据选中 下一条:Layui在table中使用select下拉框

相关文章

最新文章