[Layui]选项卡组件的联动切换

Layui.js版本:v2.9.14

1.每生成一个选项卡,都往数组里面添加一个对象

var elementList = new Array();
var elementInfo = {};
elementInfo.Name = 'tabcard' + productInfo.Country;
elementInfo.Value = "US";
elementList.push(elementInfo);

2.当tab被切换时,修改对应的值

element.on("tab(tabcard" + productInfo.Country + ")", function (data) {
    //获取修改当前element的value
    tabcardContent = data.id;
    var elementInfo = elementList.find(z => z.Name == 'tabcard' + productInfo.Country);
    elementInfo.Value = tabcardContent;
    $.each(elementList, function () {
        if (this.Name != 'tabcard' + productInfo.Country) {
            if (this.Value != tabcardContent) {
                element.tabChange(this.Name, tabcardContent); //切换选项卡
            }
        }
    })
});

关键点:

1.Layui.js的版本要大于v2.9.11.才可以获取到data.id

2.需要数组存储上一次的值,不然页面会死循环

如果有更好的办法,再更新