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切换事件