✨ feat(Table|LoadMore组件): 新增Table和LoadMore组件

src/components/table/index.module.scss

@@ -0,0 +1,50 @@
+.table {
+  border: 0px solid darkgray;
+  border-radius: 5px;
+  font-size: 22px;
+  color: #333;
+}
+
+.tr {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: 24px 0;
+  border-bottom: 1px solid #f7f7f7;
+}
+
+.td {
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  font-size: 26px;
+}
+
+.th{
+  font-size: 26px;
+}
+
+.bg-line {
+  background: #fff;
+}
+
+.bg-header {
+  justify-content: center;
+  background: #f6f7fb;
+  color: $color_font_three;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  border-radius: 8px;
+}
+
+.ellipsis_1{
+  @include common_ellipsis(1)
+}
+.ellipsis_2{
+  @include common_ellipsis(2)
+}
+
+

src/components/table/index.tsx

@@ -0,0 +1,106 @@
+import { ScrollView, View, Text } from '@tarojs/components'
+import classnames from 'classnames'
+import { FC, useState } from 'react'
+import Iconfont from '../iconfont/iconfont'
+import InfiniteScroll from '../infiniteScroll'
+import LoadMore, { LoadMoreStatus } from '../LoadMore'
+import styles from './index.module.scss'
+
+type ColumnsType = {
+  title: string
+  dataIndex: string
+  width: string
+  key: string
+  render?: (text?: string, record?: RecordType, index?: number) => React.ReactNode
+  ellipsis?: boolean | { isEllipsis: boolean; rows: number }
+}
+
+type RecordType = {
+  key: string
+  [Property: string]: any
+}
+
+interface TablePropsType {
+  columns: ColumnsType[]
+  dataSource: RecordType[]
+}
+
+const Table: FC<TablePropsType> = props => {
+  const { columns, dataSource } = props
+
+
+  const [showMore, setShowMore] = useState(false)
+
+  const [loadMoreStatus, setLoadMoreStatus] = useState<LoadMoreStatus>('loading')
+
+  const handleShowMore = () => {
+
+  }
+
+  const getColumnStyle = (columnConfig: ColumnsType) => {
+    const columnStyle = {}
+    if (typeof columnConfig.ellipsis === 'boolean' && columnConfig.ellipsis) {
+      columnStyle[styles.ellipsis_1] = true
+    }
+    if (typeof columnConfig.ellipsis === 'object' && columnConfig.ellipsis.isEllipsis) {
+      const rows = columnConfig.ellipsis.rows
+      if (rows === 2) {
+        columnStyle[styles.ellipsis_2] = true
+      } else {
+        columnStyle[styles.ellipsis_1] = true
+      }
+    }
+    return columnStyle
+  }
+
+  const sourceContainer = () => {
+    return (
+      <>
+        {!!dataSource.length &&
+          dataSource.map(source => {
+            return (
+              <View className={classnames(styles.tr, styles['bg-line'])} key={source.key}>
+                {columns.map(column => {
+                  if (column.render) {
+                    return (
+                      <View className={styles.td} style={{ width: column.width }}>
+                        {/* 判断表头是不是有render 有就执行render */}
+                        {column.render(source[column.dataIndex])}
+                      </View>
+                    )
+                  } else {
+                    return (
+                      <View className={classnames(styles.td, getColumnStyle(column))} style={{ width: column.width }}>
+                        {
+                          source[column.dataIndex] //根据表头填数据
+                        }
+                      </View>
+                    )
+                  }
+                })}
+              </View>
+            )
+          })}
+        {showMore && (
+          <LoadMore status={loadMoreStatus} onClick={handleShowMore}></LoadMore>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <View className={styles.table}>
+      <View className={classnames(styles.tr, styles['bg-header'])}>
+        {columns.map(column => {
+          return (
+            <View className={styles.th} style={{ width: column.width }} key={column.key}>
+              {column.title}
+            </View>
+          )
+        })}
+      </View>
+      <ScrollView>{sourceContainer()}</ScrollView>
+    </View>
+  )
+}
+export default Table