Table 表格

表格组件一般用于展示大量结构化数据的场景

平台差异说明

基本使用

本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成

• table组件裹在最外层，可以配置一些基础参数
• tr组件用于显示”行”数据
• th组件用于显示表头内容，类似td，不同之处在于字体加粗了，也带有背景颜色，也可以直接用td替代th
• td组件不是最小单位，为了合并单元格时，内部可以嵌入tr和td组件

<template>
    <u-table>
        <u-tr>
            <u-th>学校</u-th>
            <u-th>班级</u-th>
            <u-th>年龄</u-th>
        </u-tr>
        <u-tr>
            <u-td>浙江大学</u-td>
            <u-td>二年级</u-td>
            <u-td>22</u-td>
        </u-tr>
        <u-tr>
            <u-td>清华大学</u-td>
            <u-td>05班</u-td>
            <u-td>20</u-td>
        </u-tr>
    </u-table>
</template>

合并单元格

注意

由于微信小程序编译后特殊的元素结构，目前合并单元格暂不支持微信小程序端

• 可以在td组件嵌入多个tr，就会得到多行，tr中再嵌入td，就可以合并单元格，可以通过width参数 设置单元格的百分比长度，默认为每个单元格平均分tr的长度

下面的示例为合并”行”单元格的写法，设置td的width为33.33333%，第一行的第一个td宽度占据三分之一

<u-table>
    <u-tr>
        <u-td width="33.33333%">浙江大学</u-td>
        <u-td>
            <u-tr>
                <u-td>二年级</u-td>
                <u-td>22</u-td>
            </u-tr>
            <u-tr>
                <u-td>二年级</u-td>
                <u-td>22</u-td>
            </u-tr>
        </u-td>
    </u-tr>
    <u-tr>
        <u-td>清华大学</u-td>
        <u-td>05班</u-td>
        <u-td>20</u-td>
    </u-tr>
</u-table>

下面的示例为合并”列”单元格的写法，设置td的width为66.66666%，第一行的第一个td宽度占据总宽度的三分之二

<u-table>
    <u-tr>
        <u-td width="66.66666%">浙江大学</u-td>
        <u-td>
            二年级
        </u-td>
    </u-tr>
    <u-tr>
        <u-td>清华大学</u-td>
        <u-td>05班</u-td>
        <u-td>20</u-td>
    </u-tr>
</u-table>

API

Table Props

Td Props

Th Props