uniapp中uview组件库丰富的Table 表格的使用方法

简介: uniapp中uview组件库丰富的Table 表格的使用方法

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

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

#基本使用

本组件标签类似HTML的table表格,由tabletrthtd四个组件组成

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

#兼容性

由于头条小程序的兼容性问题,您需要给表格相关的组件(u-tru-thu-td)写上对应的类名才有效,如下:

<u-table>
  <u-tr class="u-tr">
    <u-th class="u-th">姓名</u-th>
    <u-th class="u-th">年龄</u-th>
    <u-th class="u-th">籍贯</u-th>
    <u-th class="u-th">性别</u-th>
  </u-tr>
  <u-tr class="u-tr">
    <u-td class="u-td">吕布</u-td>
    <u-td class="u-td">22</u-td>
    <u-td class="u-td">楚河</u-td>
    <u-td class="u-td">男</u-td>
  </u-tr>
</u-table>

#API

#Table Props

参数 说明 类型 默认值 可选值
border-color 表格边框的颜色 String #e4e7ed -
bg-color 表格的背景颜色 String #ffffff -
align 单元格的内容对齐方式,作用类似css的text-align String center left / right
padding 单元格的内边距,同css的padding写法 String 10rpx 0 -
font-size 单元格字体大小,单位rpx String | Number 28 -
color 单元格字体颜色 String #606266 -
th-style th单元格的样式,对象形式(将th所需参数放在table组件,是为了避免每一个th组件要写一遍) Object {} -

#Td Props

参数 说明 类型 默认值 可选值
width 单元格宽度百分比或者具体带单位的值,如30%, 200rpx等,一般使用百分比,单元格宽度默认为均分tr的长度 String | Number auto -

#Th Props

参数 说明 类型 默认值 可选值
width 标题单元格宽度百分比或者具体带单位的值,如30%, 200rpx等,一般使用百分比,单元格宽度默认为均分tr的长度 String | Number - -


相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
55 10
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
80 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
63 1
|
21天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
36 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
112 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
113 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章