layui获取tab页id_LayUI的Tab选项卡切换显示对应数据

LayUI tab选项卡 + 分页展示 实现 Tab选项卡切换显示对应数据

要求：实现tab选项卡改变的同时展示数据也跟着改变

实现条件：

1、选项卡【官网 – 文档/示例 – 页面元素 – 选项卡】

2、数据表格【官网 – 文档/示例 – 内置模块 – 数据表格】

3、分页【官网 – 文档/示例 – 内置模块 – 分页】

具体实现过程：

1、先找选项卡、使用默认的tab、然后查看代码、复制对应的代码。

2、然后改成自己想要显示效果、如下：

3、然后查看具体的代码如下：

4、获取Tab选项卡的状态值

到目前为止、实现了点击对应的Tab选项卡、展示对应的内容。但是、我现在要展示的订单的状态对应的数据、应拿到对应的每一个Tab选项卡的状态值、然后将内容展示在对应的位置。那如何获取每一个选项课的状态值呢？

4.1 先给每一个Tab选项卡一个自定义属性、用来存放状态值。具体代码如下：

4.2 获取对应的值。在官网手册文档上、我们可以找到监听Tab切换事件

4.3 获取状态

然后直接copy代码到我们自己的目录下、然后运行、会发现没有效果。那如何解决呢？仔细看代码、会发现监听的是tab(filter)、那么我们需要给一个lay-filter。那这个filter给谁呢