layui 列表字段根据查询条件动态展示实例代码

layui是一个轻量级的前端UI框架，它提供了一个简单易用的方式来创建表格组件，其中列表字段可以根据查询条件动态展示。下面是一个简单的实例代码，假设我们有一个商品列表，需要根据用户选择的分类筛选显示对应的商品：

HTML部分：

<div>
    <select lay-filter="category">
        <option value="">所有分类</option>
        <!-- 添加你的分类选项 -->
        <option value="1">电子产品</option>
        <option value="2">服装鞋帽</option>
        <!-- ... -->
    </select>
</div>
<table id="list" lay-model="demo">
    <!-- 动态列头示例 -->
    <thead>
        <tr>
            <td data-field="name">商品名称</td> <!-- 这里会根据筛选动态变化 -->
            <td data-field="price">价格</td>
            <!-- ... -->
        </tr>
    </thead>
</table>

JavaScript部分 (假设你有`data`数组存储商品信息)：

layui.use('laytable', function(){
    var $ = layui.$, laytable = layui.laytable;

    // 初始化表格
    var table = laytable.render({
        elem: '#list',
        data: [], // 这里需要替换为你实际的数据源
        columns: [
            {field: 'name', title: '商品名称'},
            {field: 'price', title: '价格'}
            // ... 更多列
        ]
    });

    // 根据类别筛选
    $('#category').on('change', function(){
        var category = $(this).val();
        if (category === '') {
            // 如果未选择，显示全部数据
            table.reload();
        } else {
            // 筛选特定分类
            table.filter([['category', '=', category]]).refresh();
        }
    });
});

在这个例子中，当用户选择分类时，会选择器事件触发，根据所选值更新表格的过滤条件，从而动态展示相应的列。