layui table切换
时间: 2023-10-27 22:08:21 浏览: 59
您好,关于 layui table 切换,可以使用 element 模块的 tab 切换来实现。下面是一个示例代码:
HTML 代码:
```
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">表格1</li>
<li>表格2</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table id="table1" lay-filter="table1"></table>
</div>
<div class="layui-tab-item">
<table id="table2" lay-filter="table2"></table>
</div>
</div>
</div>
```
JavaScript 代码:
```
// 使用 layui.use() 方法加载模块
layui.use(['element', 'table'], function(){
// 获取 element 和 table 模块
var element = layui.element;
var table = layui.table;
// 监听 tab 切换的事件
element.on('tab', function(data){
if (data.index === 1) {
// 如果切换到第二个 tab,加载表格2
table.render({
elem: '#table2',
url: '/api/table2',
// 其他配置项
});
} else {
// 否则加载表格1
table.render({
elem: '#table1',
url: '/api/table1',
// 其他配置项
});
}
});
});
```
在这个示例代码中,我们使用了 `element.on('tab', function(data){...})` 方法来监听 tab 切换的事件,然后根据切换的索引值来决定加载哪个表格,使用 `table.render({...})` 方法来渲染表格。需要注意的是,每个表格都要有一个唯一的 `id` 和 `lay-filter` 属性。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
0">
{{bk.bookName}} ¥{{bk.bookPrice}} //列表页——分页 layui.use(['laypage'], function () { var laypage = layui.laypage; laypage.render({ elem: 'houseList' , count: 25 , limit: 5 , theme: '#daba91' , layout: ['page', 'next'] }); }); Vue.config.productionTip = false //阻止vue在启动时生成生产提示 new Vue({ el: "#app", data() { return { bookAll: [] } }, mounted() { var _this = this; axios({ method: 'get', url: 'http://localhost:8080/BookShopSystem_war/getBookAll' }).then(function (result) { var code = result.data.code; var data = result.data.data; if (code == 0) { _this.bookAll = data; } console.log(data) }) } })已省略部分代码,数据都可遍历出来,如何实现分页功能
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)