小程序原生沒有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:'個人中心'}
- 目錄結構同級建立index.config.js: