「uni

2024-07-12 10:00| 来源: 网络整理| 查看: 265

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

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

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

功能亮点

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

未实现

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

效果演示

[email protected]

调用方式默认效果序号姓名年龄爱好 {{ item.id + 1 }} {{ item.name }} {{ item.age }} {{ item.hobby }} 自定义样式姓名年龄爱好操作 {{ item.name }} {{ item.age }} {{ item.hobby }} 编辑 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 组件

属性说明

属性名类型默认值说明 border String 1 边框粗细 border-color Color #d0dee5 边框颜色 is-check Boolean false 是否开启列多选 @change function 开启多选生效，返回值 event = [0,1,2] t-tr

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

属性说明

属性名类型默认值说明 font-size String 15 行字体大小 color Color #3b4246 行字体颜色 align String center 行字体对其方式，可取值：'left' 左对齐;'center' 居中对齐;'right' 右对齐; t-th

表格内的表头单元格组件

属性说明

属性名类型默认值说明 align String center 行字体对其方式，可取值：'left' 左对齐;'center' 居中对齐;'right' 右对齐; t-td

表格中的标准单元格组件

属性说明

属性名类型默认值说明 align String center 行字体对其方式，可取值：'left' 左对齐;'center' 居中对齐;'right' 右对齐;

Tips

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

【本文地址】

公司简介

联系我们