layui列表多字段选择展示

您可以使用 layui 的表格组件实现列表多字段选择展示的功能，具体实现步骤如下：

1. 在 HTML 页面中定义一个表格元素，引入 layui 的表格组件，并设置表格的列信息：

<table id="demo" lay-filter="test"></table>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script>
<script>
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#demo',
      url: '数据接口地址',
      cols: [[
        {field: 'id', title: 'ID'},
        {field: 'name', title: '姓名'},
        {field: 'age', title: '年龄'},
        {field: 'gender', title: '性别'}
      ]]
    });
  });
</script>

2. 在 JavaScript 中设置表格的操作列，用于展示多字段选择的功能：

table.render({
  elem: '#demo',
  url: '数据接口地址',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'},
    {field: 'age', title: '年龄'},
    {field: 'gender', title: '性别'},
    {title: '操作', toolbar: '#barDemo'}
  ]]
});

3. 在 HTML 页面中定义一个模板元素，用于设置操作列的内容：

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="select">选择</a>
  {{# if(d.age >= 18){ }}
    <a class="layui-btn layui-btn-xs" lay-event="drink">喝酒</a>
  {{# } }}
</script>

4. 在 JavaScript 中设置操作列的事件处理程序，用于实现多字段选择的功能：

table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'select'){
    console.log(data.name + ' ' + data.age + '岁 ' + data.gender);
  } else if(obj.event === 'drink'){
    console.log(data.name + '可以喝酒了');
  }
});

这样，当用户点击操作列中的“选择”按钮时，控制台就会输出该行数据的姓名、年龄和性别。您可以根据需要修改操作列的模板和事件处理程序，实现自己的多字段选择展示功能。