Table 表格

基础表格展示，结构同html中的table、tr和td。

默认颜色为灰色主题，可以在/components/com-table/static/table.scss进行主题切换。

基本使用

基础表格展示

<com-table>
    <com-tr head>
        <com-td>姓名</com-td>
        <com-td>年龄</com-td>
        <com-td>性别</com-td>
        <com-td>手机号码</com-td>
        <com-td>地址</com-td>
    </com-tr>
    
    <com-tr v-for="(item, index) in 3">
        <com-td>张三</com-td>
        <com-td>18</com-td>
        <com-td>女</com-td>
        <com-td min-width="250rpx">13713137078</com-td>
        <com-td minWidth="350rpx">湖南省长沙市雨花区</com-td>
    </com-tr>
    
</com-table>

固定第一行第一列以及最后一列

<com-table>
    <com-tr fixed head>
        <com-td fixed>姓名</com-td>
        <com-td>年龄</com-td>
        <com-td>性别</com-td>
        <com-td>手机号码</com-td>
        <com-td>地址</com-td>
        <com-td fixed="right">操作</com-td>
    </com-tr>
    
    <com-tr v-for="(item, index) in 100">
        <com-td fixed>张三{{ item }}</com-td>
        <com-td>18</com-td>
        <com-td>女</com-td>
        <com-td min-width="250rpx">13713137078</com-td>
        <com-td minWidth="350rpx">湖南省长沙市雨花区</com-td>
        <com-td fixed="right">
            <view class="pd-16">
                <com-button type="main" width="80" height="48" fontSize="24">详情</com-button>
            </view>
        </com-td>
    </com-tr>
    
</com-table>

API

Table Props

属性名	说明	类型	必填	默认值
width	宽度	String	否	100%
height	高度	String	否	1000rpx
stripe	是否显示斑马纹	Boolean	否	true
border	是否显示边框	Boolean	否	true
customStyle	自定义样式	Object	否	{}

Tr Props

属性名	说明	类型	必填	默认值
height	高度	String	否	-
minHeight	最小高度	String	否	100rpx
maxHeight	最大高度	String	否	100rpx
fixed	是否固定	Boolean / String	否	false
head	是否是表头	Boolean	否	false
customStyle	自定义样式	Object	否	{}

Td Props

属性名	说明	类型	必填	默认值
width	宽度	String	false	-
minWidth	最小宽度	String	false	100rpx
maxWidth	最大宽度	String	false	-
fixed	是否固定	Boolean / String	false	false
rowspan	跨行 (小程序不支持)	Number / String	false	1
colspan	跨列 (小程序不支持)	Number / String	false	1
customStyle	自定义样式	Object	false	{}