使用layui过程中的问题

2024-11-15 16:47:06

场景：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Layui Multiple Tables Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui/dist/css/layui.css">
</head>
<body>

<div>
    <table id="dataTable1" class="layui-hide"></table>
    <table id="dataTable2" class="layui-hide"></table>
    <table id="dataTable3" class="layui-hide"></table>
    <table id="dataTable4" class="layui-hide"></table>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui/dist/layui.all.js"></script>
<script>
    // 假设这是你需要的数据和列配置
    var tableData1 = [...]; // 数据源1
    var tableData2 = [...]; // 数据源2
    var tableData3 = [...]; // 数据源3
    var tableData4 = [...]; // 数据源4

    var tableClos = [
        [ // 表格1列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ],
        [ // 表格2列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ],
        [ // 表格3列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ],
        [ // 表格4列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ]
    ];

    
    

    // 在此处加载表格和自定义模块
    layui.use(['table', 'soulTable'], function() {
        var table = layui.table;
        var soulTable = layui.soulTable; // 获取自定义模块

        // 渲染四个表格
        var tables = [
            { elem: "#dataTable1", data: tableData1, cols: tableClos[0] },
            { elem: "#dataTable2", data: tableData2, cols: tableClos[1] },
            { elem: "#dataTable3", data: tableData3, cols: tableClos[2] },
            { elem: "#dataTable4", data: tableData4, cols: tableClos[3] }
        ];

        tables.forEach(function(tableConfig) {
            layui.config({
                base: '../commons/plug-in/layui2.6.7/ext',
                version: "v1.6.4"
            }).extend({
                soulTable: "soulTable"
            });

            table.render({
                elem: tableConfig.elem,
                height: 300, // 替换为实际需要的高度
                page: false,
                data: tableConfig.data, // 数据源
                cols: [tableConfig.cols], // 列配置
                done: function() {
                    soulTable.render(this); // 调用 soulTable 的 render 方法
                }
            });
        });
    });
</script>

</body>
</html>

我这样写后，控制台报错：Layui hint: 模块名 SoulTable 已被占用

回答：

在使用 Layui 的自定义模块时，出现 “Layui hint: 模块名 SoulTable 已被占用” 这样的错误，通常是因为我们尝试多次通过 `extend` 方法注册同一个模块名。解决这个问题的常见方法是确保只调用一次 `extend` 方法，而不是在每次使用 `soulTable` 时都重新定义它。

更新后的代码示例

你可以按照以下方式修改你的代码，以避免重复扩展模块：


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Layui Multiple Tables Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui/dist/css/layui.css">
</head>
<body>

<div>
    <table id="dataTable1" class="layui-hide"></table>
    <table id="dataTable2" class="layui-hide"></table>
    <table id="dataTable3" class="layui-hide"></table>
    <table id="dataTable4" class="layui-hide"></table>
</div>

<script src="https://cdn.jsdelivr.net/npm/layui/dist/layui.all.js"></script>
<script>
    // 假设这是你需要的数据和列配置
    var tableData1 = [...]; // 数据源1
    var tableData2 = [...]; // 数据源2
    var tableData3 = [...]; // 数据源3
    var tableData4 = [...]; // 数据源4

    var tableClos = [
        [ // 表格1列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ],
        [ // 表格2列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ],
        [ // 表格3列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ],
        [ // 表格4列配置
            { field: 'id', title: 'ID', width: 80, sort: true },
            { field: 'name', title: '姓名', width: 120 },
            { field: 'age', title: '年龄', width: 80, sort: true }
        ]
    ];

    // 确保只在一次执行中扩展模块
    layui.config({
        base: '../commons/plug-in/layui2.6.7/ext',
        version: "v1.6.4"
    }).extend({
        soulTable: "soulTable"
    });

    // 在此处加载表格和自定义模块
    layui.use(['table', 'soulTable'], function() {
        var table = layui.table;
        var soulTable = layui.soulTable; // 获取自定义模块

        // 渲染四个表格
        var tables = [
            { elem: "#dataTable1", data: tableData1, cols: tableClos[0] },
            { elem: "#dataTable2", data: tableData2, cols: tableClos[1] },
            { elem: "#dataTable3", data: tableData3, cols: tableClos[2] },
            { elem: "#dataTable4", data: tableData4, cols: tableClos[3] }
        ];

        tables.forEach(function(tableConfig) {
            table.render({
                elem: tableConfig.elem,
                height: 300, // 替换为实际需要的高度
                page: false,
                data: tableConfig.data, // 数据源
                cols: [tableConfig.cols], // 列配置
                done: function() {
                    soulTable.render(this); // 调用 soulTable 的 render 方法
                }
            });
        });
    });
</script>

</body>
</html>


改动说明

1. 避免重复扩展:
   - 将 `layui.config().extend()` 部分放在外部，确保在页面加载时只运行一次，不会重复注册 `soulTable` 模块。

2. 使用数组存储表格配置:
   - 我创建了一个 `tables` 数组，将所有表格的配置集中管理，并用 `forEach` 循环来渲染每个表格。这种方式更简洁，易于维护。

这样，可以确保在加载和使用 `soulTable` 模块时不会碰到“模块名已被占用”的错误。如果还有其他问题或具体需求，请随时告诉我！

码农公寓

相关文章