【React工作记录一百零七】原生table实现矩阵展示打勾功能

前言

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

需求设计

定义数据格式

[
		[
			{
				"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)
  }

通过flag的true和false切换控制打勾

运行结果

总结

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 一起学习前端知识