小程序（uniapp）实现规格表，每单行实现只选中一个

首先看看数据

{
    "specGroup": [
        {
            "specGroupId": "101", 
            "specGroupName": "颜色", 
            "specList": [
                {
                    "specId": "1001", 
                    "specName": "红色"
                }, 
                {
                    "specId": "1002", 
                    "specName": "黄色"
                }, 
                {
                    "specId": "1003", 
                    "specName": "黑色"
                }, 
                {
                    "specId": "1004", 
                    "specName": "白色"
                }
            ]
        }, 
        {
            "specGroupId": "102", 
            "specGroupName": "尺寸", 
            "specList": [
                {
                    "specId": "2001", 
                    "specName": "S"
                }, 
                {
                    "specId": "2002", 
                    "specName": "M"
                }, 
                {
                    "specId": "2003", 
                    "specName": "L"
                }, 
                {
                    "specId": "2004", 
                    "specName": "XL"
                }
            ]
        }, 
        {
            "specGroupId": "103", 
            "specGroupName": "重量", 
            "specList": [
                {
                    "specId": "3001", 
                    "specName": "5斤"
                }, 
                {
                    "specId": "3002", 
                    "specName": "10斤"
                }, 
                {
                    "specId": "3003", 
                    "specName": "15斤"
                }, 
                {
                    "specId": "3004", 
                    "specName": "20斤"
                }
            ]
        }, 
        {
            "specGroupId": "104", 
            "specGroupName": "加厚", 
            "specList": [
                {
                    "specId": "4001", 
                    "specName": "加厚1cm"
                }, 
                {
                    "specId": "4002", 
                    "specName": "加厚2cm"
                }, 
                {
                    "specId": "4003", 
                    "specName": "加厚3cm"
                }, 
                {
                    "specId": "4004", 
                    "specName": "加厚4cm"
                }
            ]
        }
    ]
}

首先根据列表个数生成四行来控制的是那个元素被选中

 

 

然后是结构搭建 和css

 

 　　

这里用子元素的索引index（图中inIndex)判断如果等于行的子元素索引就会添加一个css类
添加了一个方法（onclick）传 行的的index跟子元素的index

 

 

JS就那么点

 

css用的lang = sass

 

成图