taro微信小程序实现table

微信小程序没有table组件，taro也没有，使用起来很不方便，简单的自己封装了一个。

js代码 atTable.jsx

// 自己简单封装的表格组件，taro 和微信都没有table组件
import { Component } from 'react'
import { View} from '@tarojs/components'
import './AtTable.scss'

//需要传进来的数据示例
const exampledataSource = [
    {
        username: '小红',
        count: '123',
        gb:'321',
        dbd:'30%'
    }
]
//需要传进来的表头数据示例
const examplecolumns = [
    {
        title: '名称',
        dataIndex: 'username',
        width:'20%',
    },
    {
        title: '含量',
        dataIndex: 'count',
        width:'20%',
    },
    {
        title: '标准',
        dataIndex: 'gb',
        width:'40%',
    },
    {
        title: '达标度',
        dataIndex: 'dbd',
        width:'20%',
    },
]

//原理 循环生成表头，循环数据根据表头填入每一列
export default class AtTable extends Component {

    render () {
        return (
            <View className="table">
                <View className="tr bg-header">
                    {
                        this.props.columns.map((item,index)=>{
                            return (<View className="th" style={{ width:item.width}}>
                                    {item.title}
                                    </View>)
                        })
                    }
                </View>
                
                    {
                        this.props.dataSource.map((item,index)=>{
                            return (
                                    <View className="tr bg-line">
                                    {
                                        this.props.columns.map((item2,index2)=>{
                                            if(item2.render){
                                                return (
                                                    <View className="td" style={{ width:item2.width}}>
                                                        {  
                                                            item2.render(item[item2.dataIndex])  //判断表头是不是有render 有就执行render
                                                        }
                                                    </View>
                                                )
                                            }
                                            else {
                                                return (     
                                                    <View className="td" style={{ width:item2.width}}>
                                                        {  
                                                            item[item2.dataIndex]  //根据表头填数据
                                                        }
                                                    </View>
                                                )
                                            }
                                        }
                                        )
                                    }
                                    </View>
                                    )
                        })
                    }
                </View>                

        )
    }
}

css代码 aTable.scss

.table {
    border: 0px solid darkgray;
    border-radius:5px;
    font-size: 22rpx;
    color: #333;
    }
    
    .tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 50px;
    align-items: center;
    border-bottom: 1px solid #F7F7F7;
    }

    .td {
        justify-content: center;
        text-align: center;
        border-right: 1px solid #F7F7F7;
        border-left: 1px solid #F7F7F7;
        align-items: center;
        display: flex;
        }
    
    
    .bg-line{
    background: #FFF;
    }
    
    .bg-header {
    justify-content: center;
    background:#ffd6414b;;
    color: #333;
    display: flex;
    height: 50px;
    align-items: center;
    text-align: center;
    }
    .aaa{
        background-color: #30cc00;
    }

调用方法

<AtTable dataSource={this.props.baseData_choose} columns={this.columns_choose}/>  

效果演示