原生table实现矩阵展示打勾功能

原创

前端歌谣 2023-05-28 00:08:51 ©著作权

文章标签 c++ ecmascript java javascript 开发语言 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者前端歌谣的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

大家好我是歌谣今天又遇到了一个新的开发需求就是我们的需要实现一个二维表功能

需求设计

定义数据格式

[
        [
            {
                "flag": "false",
                "id": "96aea64d-5014-4479-98bd-64eac444e64a",
                "value": "尺码/颜色"
            },
            {
                "flag": "false",
                "id": "9cf8e371-8738-4c61-acb4-a80b036bc44e",
                "value": "黑色/8056"
            },
            {
                "flag": "false",
                "id": "60c009b3-b215-4761-acd4-77cd080c5e9a",
                "value": "秘釉色7475"
            }
        ],
        [
            {
                "flag": "false",
                "id": "cf606eae-f535-48a0-a5d6-566979699a2d",
                "value": "165"
            },
            {
                "flag": "false",
                "id": "3b868f1d-9dbf-4d55-acc7-eb170f071af7",
                "value": ""
            },
            {
                "flag": "false",
                "id": "e5b4f621-f03b-4079-b34d-d99952764e00",
                "value": ""
            }
        ],
        [
            {
                "flag": "false",
                "id": "a17a855b-8a3b-4202-813f-52a39dd6b183",
                "value": "170"
            },
            {
                "flag": "false",
                "id": "204885f5-c786-4dfa-a949-3beb873d8b1f",
                "value": ""
            },
            {
                "flag": "false",
                "id": "de183b17-8971-4735-9b03-0e9169bf672b",
                "value": ""
            }
        ],
        [
            {
                "flag": "false",
                "id": "91923b21-bdaa-45fa-bf49-89286fefda75",
                "value": "175"
            },
            {
                "flag": "false",
                "id": "9c3d73f8-b693-48fa-93b4-d36b43862728",
                "value": ""
            },
            {
                "flag": "false",
                "id": "d578b782-0494-4223-9b5e-22106e7316f3",
                "value": ""
            }
        ],
        [
            {
                "flag": "false",
                "id": "94a7a2c9-2f26-4bd5-83f8-7b3c691e9bef",
                "value": "160"
            },
            {
                "flag": "false",
                "id": "b4a89ad8-2e35-4687-92e8-9b2b2b0206c9",
                "value": ""
            },
            {
                "flag": "false",
                "id": "1ad8ca10-089a-4719-9782-b0f84e3c7dcd",
                "value": ""
            }
        ],
        [
            {
                "flag": "false",
                "id": "2d5fcd60-cf7b-4bf7-bcd9-3cc9d91189d0",
                "value": "155"
            },
            {
                "flag": "false",
                "id": "370e5ebf-3db5-4ce5-bfe6-8eb97601c27a",
                "value": ""
            },
            {
                "flag": "false",
                "id": "a5654806-808a-469b-94e1-29d2fe6b2e28",
                "value": ""
            }
        ]
    ]

紧接着就是数据处理两层循环

<table style={{ border: "1px solid #ccc" }}>
            {dataListTest && dataListTest.map((outer: any, index: any) => (
              <tr>
                {outer && outer.map((inner: any, num: any) => {
                  if (num == 0 || index == 0) {
                    return <th style={{ width: "5%", border: "1px solid #ccc", }}>{inner.value}</th>
                  } else {
                    return <th onClick={() => handleClick(inner)} style={{
                      width: "5%", border: "1px solid #ccc",
                    }}>{inner.flag ? "✔" : inner.value}</th>
                  }
                })}
              </tr>
            ))}
          </table>

需要进行两层循环然后三元用来判断是否打勾 (num == 0 || index == 0)控制第一行和第一列不可以点击

处理方法

const handleClick = (test: any) => {
    var dataList = JSON.parse(JSON.stringify(dataListTest))
    for (const outer of dataList) {
      for (const inner of outer) {
        if (inner.id == test.id) {
          inner.flag = !inner.flag
        }
      }
    }
    console.log(dataList, "dataChange")
    setDataListTest(dataList)
  }