1. 简介
在web应用中，数据表格是非常常见的一种数据展示方式，对于一个具有大量数据的表格，可能会出现表格某些列不需要展示的情况，此时我们可以使用layui中的table组件提供的隐藏列功能来实现。
2. 使用方法
2.1 数据表格基本使用
在使用layui的table组件前需要先导入layui的css和js文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格示例</title>
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<body>
<table id="dataTable" lay-filter="dataTable"></table>
<script src="/layui/layui.js"></script>
<script>
//数据表格渲染
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#dataTable',
url: '/user/list',
cols: [[
{type:'checkbox'},
{field:'username', title:'用户名'},
{field:'sex', title:'性别'},
{field:'age', title:'年龄'},
{field:'phone', title:'手机号'},
{field:'email', title:'邮箱'}
]]
});
});
</script>
</body>
</html>
在table组件的基础上，实现列的隐藏只需在列配置中添加hide属性即可，hide属性值为true时表示该列隐藏，反之为显示，具体代码如下：
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#dataTable',
url: '/user/list',
cols: [[
{type:'checkbox'},
{field:'username', title:'用户名'},
{field:'sex', title:'性别', hide:true},
{field:'age', title:'年龄'},
{field:'phone', title:'手机号'},
{field:'email', title:'邮箱', hide:true}
]]
});
});
2.2 动态控制列的显示与隐藏
除了在列配置中添加hide属性外，表格还提供了API控制列的显隐，具体方法为借助table组件提供的设置属性，根据需要传递对应的参数来控制列的显示或隐藏，如下所示：
layui.use(['table', 'jquery'], function(){
var table = layui.table;
var $ = layui.jquery;
//数据表格渲染
table.render({
elem: '#dataTable',
url: '/user/list',
cols: [[
{type:'checkbox'},
{field:'username', title:'用户名'},
{field:'sex', title:'性别'},
{field:'age', title:'年龄'},
{field:'phone', title:'手机号'},
{field:'email', title:'邮箱', hide: true}
]],
done: function(){
//表格渲染完成后，事件绑定
//动态控制列显示与隐藏
$("#hideEmailBtn").click(function(){
table.setColsHidden('dataTable', [5], true); //隐藏邮箱列
});
$("#showEmailBtn").click(function(){
table.setColsHidden('dataTable', [5], false); //显示邮箱列
});
}
});
});
上述代码中，通过调用table.setColsHidden()方法，传递第一个参数为数据表格的id属性，第二个参数为需要隐藏的列对应的下标，第三个参数为是否隐藏，true表示隐藏，false表示显示。
3. 总结
本文介绍了layui中table数据表格隐藏列的方法，通过在列配置中添加hide属性或使用setColsHidden()方法动态控制列的显隐来实现。希望本文能够对您的工作或学习有所帮助。