uniapp 表格

 

 

 

1、下载table插件： https://ext.dcloud.net.cn/plugin?id=413

2、引入并使用：

<template>
    <view class="warp">
        <view class="box">
            <view class="title">默认效果</view>
            <t-table @change="change" border-color="#3a88b9" >
                <t-tr font-size="12" color="#3a88b9">
                    <t-th>姓名</t-th>
                    <t-th>年龄</t-th>
                    <t-th>爱好</t-th>
                    <t-th>操作</t-th>
                </t-tr>
                <t-tr v-for="item in tableList" :key="item.id">
                    <t-td>{{ item.name }}</t-td>
                    <t-td>{{ item.age }}</t-td>
                    <t-td>{{ item.hobby }}</t-td>
                    <t-td>
                        <view @click="edit(item)" class="editBtn">编辑</view>
                    </t-td>
                </t-tr>
            </t-table>
        </view>
        <view class="box">
            <view class="title">自定义效果</view>
            <t-table border="2" border-color="#3a88b9" @change="change" :isCheck="true">
                <t-tr font-size="12" color="#3a88b9">
                    <t-th>姓名</t-th>
                    <t-th>年龄</t-th>
                    <t-th>爱好</t-th>
                    <t-th>操作</t-th>
                </t-tr>
                <t-tr font-size="10" color="#333"  v-for="item in tableList" :key="item.id">
                    <t-td>{{ item.name }}</t-td>
                    <t-td>{{ item.age }}</t-td>
                    <t-td>{{ item.hobby }}</t-td>
                    <t-td>
                        <view @click="edit(item)" class="editBtn">编辑</view>
                    </t-td>
                </t-tr>
            </t-table>
        </view>
    </view>
</template>

<script>
        import tTable from '@/components/t-table/t-table.vue';
        import tTh from '@/components/t-table/t-th.vue';
        import tTr from '@/components/t-table/t-tr.vue';
        import tTd from '@/components/t-table/t-td.vue';
        export default {
            components: {
                tTable,
                tTh,
                tTr,
                tTd
            },
            data() {
                return {
                    tableList: [{
                            id: 1,
                            name: '张小于',
                            age: '13',
                            hobby: '攀登'
                        },
                        {
                            id: 2,
                            name: '李越',
                            age: '15',
                            hobby: '极限运动'
                        },
                        {
                            id: 3,
                            name: '王月',
                            age: '12',
                            hobby: "跳舞"
                        },
                        {
                            id: 4,
                            name: '钟小艾',
                            age: '16',
                            hobby: '唱歌'
                        }
                    ]
                };
            },
            methods: {
                change(e) {
                    console.log(e.detail);
                },
                edit(item) {
                    uni.showToast({
                        title: `修改${item.name}个人信息`,
                        icon: 'none'
                    });
                }
            }
        };
</script>

.editBtn{
    width: 100rpx;
    height:50rpx;
    line-height: 50rpx;
    text-align: center;
    color:#3a88b9;
    border: 1px solid #e5e5e5;
}
.title{
    font-size: 24rpx;
    padding:20rpx;
}