基础react原生封装带checkbox的table组件

原生react封装带有复选框的table

由于需求，需要写一个原生的Table组件，本来是想参照一些源码，但是他们也都引用了其他组件，就没啥用了。封装的比较简单，但是基础的一些功能都有，因为table的种类也很繁杂，所以这只是其中一种。下图为样式，如果不合适你换别人的看看吧（嘻嘻嘻嘻嘻）

主要思想就是分成columns和data两部分，按需求对数组进行遍历

        <thead>
          <tr className={styles.column}>
            {columns.map((item) => (
              <th key={item.dataIndex}>{item.title}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            <tr key={item.key} className={styles.row}>
              <td>
                <input
                  type="checkbox"
                  onChange={e => checkItem(e, item)}
                  className={styles.checkbox}
                  disabled={item.disabled}
                />
              </td>
              {indexList.map((child, index) => (
                <td key={`${item.key}-${index}`}>{item[child]}</td>
              ))}
              <td>
                {columns.map((col) => (
                  col.render && col.render(item)
                ))}
              </td>
            </tr>
          ))}
        </tbody>

…end

链接: table组件

使用在src/pages/tablepage
组件在src/components/table