小程序表格渲染

小程序原生没有table组件，我实现了一个，用法和ant Design相同，但目前仅支持两个字段，后续有需要再完善

使用Taro开发小程序

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: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园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} />

通过上述代码，可以初步实现渲染表格的逻辑，数据结构和ant Design完全相同。

• 配置页面title：
  • 目录结构同级建立index.config.js：export default{navigationBarTitleText:'个人中心'}