小程序原生沒有table組件犬缨，我實現(xiàn)了一個，用法和ant Design相同棉浸，但目前僅支持兩個字段怀薛，后續(xù)有需要再完善

使用Taro開發(fā)小程序

component：

import React, { Component } from "react";
import "./index.scss";
import { View } from "@tarojs/components";

export default class Tabel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: this.props.columns.map((item) => item.key),
    };
    console.log(this.state);
  }
  getTargetItem(basedata, targetData) {
    return (
      <View key={targetData} className="table-td">
        {basedata[targetData]}
      </View>
    );
  }
  render() {
    return (
      <View className="table">
        <View className="table-tr">
          {this.props.columns.map((item) => (
            <View key={item.title} className="table-th">
              {item.title}
            </View>
          ))}
        </View>
        {this.props.dataSource.map((item) => {
          return (
            <View key={item.key} className="table-tr">
              {this.state.columns.map((target) =>
                this.getTargetItem(item, target)
              )}
            </View>
          );
        })}
      </View>
    );
  }
}

index：

const dataSource = [
  {
    key: '1',
    name: '胡彥斌',
    age: 32,
    address: '西湖區(qū)湖底公園1號',
  },
  {
    key: '2',
    name: '胡彥祖',
    age: 42,
    address: '西湖區(qū)湖底公園1號',
  },
];
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年齡',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
<Tabel dataSource={this.state.dataSource} columns={this.state.columns} />

通過上述代碼，可以初步實現(xiàn)渲染表格的邏輯迷郑，數(shù)據(jù)結構和ant Design完全相同枝恋。

• 配置頁面title：
  • 目錄結構同級建立index.config.js：export default{navigationBarTitleText:'個人中心'}