layui显示和隐藏表格字段

可以通过layui的table模块的cols属性中的hide属性来控制表格字段的显示和隐藏。

例如，我们有一个id、name、age和email四个字段的表格：

<table id="demo" lay-filter="test"></table>

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    cols: [[
      {field:'id', hide:true},
      {field:'name', title: '姓名'},
      {field:'age', title: '年龄'},
      {field:'email', title: '邮箱'}
    ]]
  });
});

在上述代码中，通过在cols属性中设置hide为true，即可将id字段隐藏起来。

如果需要动态控制表格字段的显示和隐藏，可以使用table模块的reload方法重新渲染表格，并在cols属性中设置hide属性的值来控制表格字段的显示和隐藏。

例如，我们定义一个按钮来控制表格中的id字段的显示和隐藏：

<div>
  <button id="toggleBtn" class="layui-btn layui-btn-primary">隐藏ID字段</button>
</div>
<table id="demo" lay-filter="test"></table>

layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo',
    url: '/demo/table/user/',
    cols: [[
      {field:'id', hide:true},
      {field:'name', title: '姓名'},
      {field:'age', title: '年龄'},
      {field:'email', title: '邮箱'}
    ]]
  });
  
  $('#toggleBtn').on('click', function(){
    var hideId = !table.config.cols[0][0].hide;
    table.reload('demo', {
      cols: [[
        {field:'id', hide: hideId},
        {field:'name', title: '姓名'},
        {field:'age', title: '年龄'},
        {field:'email', title: '邮箱'}
      ]]
    });
    $('#toggleBtn').text(hideId ? '显示ID字段' : '隐藏ID字段');
  });
});

在上述代码中，我们定义了一个按钮，并在按钮的点击事件中调用了table模块的reload方法来重新渲染表格，并根据hideId的值来控制id字段的显示和隐藏。同时，我们也修改了按钮的文本来反映当前id字段的显示状态。