平台兼容性

t-table 表格

请在自定义组件模式下使用此组件 。相关阅读

table 表格基本使用组件，让你制作简单表格只需要专注内容，而不用过度专注样式。

此组件基本全平台支持。（支付宝，百度，头条小程序理论上都支持，但是没有很细致的测试这几个平台）

github 地址： https://github.com/mehaotian/t-table
插件市场地址：http://ext.dcloud.net.cn/plugin?id=413
功能亮点

• 自定义全局表格样式
• 自定义局部表格样式
• 表格内容自定义
• 表格多选

未实现

• 合并单元格
• 调整列宽，行高

效果演示

调用方式

<template>
    <view class="warp">
        <view class="box">
            <view class="title">默认效果</view>
            <t-table @change="change">
                <t-tr>
                    <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.id + 1 }}</t-td>
                    <t-td>{{ item.name }}</t-td>
                    <t-td>{{ item.age }}</t-td>
                    <t-td>{{ item.hobby }}</t-td>
                </t-tr>
            </t-table>
        </view>
        <view class="box">
            <view class="title">自定义样式</view>
            <t-table border="2" border-color="#95b99e" :is-check="true" @change="change">
                <t-tr font-size="14" color="#95b99e" align="left">
                    <t-th align="left">姓名</t-th>
                    <t-th align="left">年龄</t-th>
                    <t-th align="left">爱好</t-th>
                    <t-th align="center">操作</t-th>
                </t-tr>
                <t-tr font-size="12" color="#5d6f61" align="right" v-for="item in tableList" :key="item.id">
                    <t-td align="left">{{ item.name }}</t-td>
                    <t-td align="left">{{ item.age }}</t-td>
                    <t-td align="left">{{ item.hobby }}</t-td>
                    <t-td align="left"><button @click="edit(item)">编辑</button></t-td>
                </t-tr>
            </t-table>
        </view>
    </view>
</template>

    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: 0,
                        name: '张三',
                        age: '19',
                        hobby: '游泳'
                    },
                    {
                        id: 1,
                        name: '李四',
                        age: '21',
                        hobby: '绘画'
                    },
                    {
                        id: 2,
                        name: '王二',
                        age: '29',
                        hobby: '滑板'
                    },
                    {
                        id: 3,
                        name: '码字',
                        age: '20',
                        hobby: '蹦极'
                    }
                ]
            };
        },
        methods: {
            change(e) {
                console.log(e.detail);
            },
            edit(item) {
                uni.showToast({
                    title: item.name,
                    icon: 'none'
                });
            }
        }
    };

t-table

表格父组件，仅包含 tr 组件

属性说明

t-tr

表格行组件 仅包含 th,td 组件

属性说明

t-th

表格内的表头单元格组件

属性说明

t-td

表格中的标准单元格组件

属性说明

Tips

• 不提供定制，仅有这些简单内容
• 如需更复杂表格，参考源码逻辑，可自行扩展
• 不建议加载过多数据，如到一定数据，比如 10 条，建议制作翻页

更新日志

v1.0.0

• 初次提交