当前位置：首页 > news >正文

uniapp 表格，动态表头表格封装渲染

news 2025/7/15 18:51:46

1.接口表格数据：

{"headers": [{"label": "实例名","name": "v1","order": 1,"hide": false,"dateTypeValue": null},{"label": "所属科室","name": "v4","order": 1,"hide": false,"dateTypeValue": "/sso-management/department/getDepById?"},{"label": "实例状态","name": "v3","order": 1,"hide": false,"dateTypeValue": "/cmdb/dict/query?args=example_state&"},{"label": "esc_Ip","name": "v2","order": 1,"hide": false,"dateTypeValue": null},{"label": "测试1","name": "test1","order": 1,"hide": false,"dateTypeValue": null},{"label": "测试2","name": "test2","order": 1,"hide": false,"dateTypeValue": null},{"label": "测试3","name": "test3","order": 1,"hide": false,"dateTypeValue": null}],"bodyData": {"total": 4,"list": [{"test2": null,"test3": null,"v1": "ESC_001","v2": "127.0.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 1},{"test2": null,"test3": null,"v1": "ESC_002","v2": "127.0.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 2},{"test2": null,"test3": null,"v1": "ESC_003","v2": "127.0.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 3},{"test2": null,"test3": null,"v1": "ESC_004","v2": "192.168.0.1","v3": null,"test1": null,"v4": null,"ROW_ID": 4}],"pageNum": 1,"pageSize": 4,"size": 4,"startRow": 0,"endRow": 3,"pages": 1,"prePage": 0,"nextPage": 0,"isFirstPage": true,"isLastPage": true,"hasPreviousPage": false,"hasNextPage": false,"navigatePages": 8,"navigatepageNums": [1],"navigateFirstPage": 1,"navigateLastPage": 1,"firstPage": 1,"lastPage": 1}
}

2.结构：（表格内容渲染注意，需要先循环表格数据tr代表有多少行数据，再循环表头数据td取对应的字段内容，渲染）

<view class="tableStyle"><table><th><td v-for="(header, index) in tableInfo.columns" :key="index">{{ header.label }}</td></th><tr v-for="(item, i) in tableInfo.list" :key="i" @click="goToDetail(item)"><td v-for="(header, index) in tableInfo.columns" :key="index">{{item[header['name']] }}</td></tr></table></view>

3.样式

.tableStyle {width: 100%;margin-top: 40rpx;padding-top: 20rpx;background-color: #fff;overflow-y: hidden;overflow-x: auto;table {width: 100% !important;}th {width: 100%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;font-weight: 550;color: #2F80ED;font-size: 14px;padding: 12px 4px;background: #F3F6FA;td {display: inline-block;min-width: 100px;text-align: center;}}tr {width: 100%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;font-size: 14px;font-weight: 400;padding: 12px 4px;td {text-align: center;font-size: 14px;font-weight: 400;display: inline-block;min-width: 100px;text-align: center;}&:nth-child(2n+1) {background: #F3F6FA;}}}

二、第二种方式，用uni-table组件渲染

官网uniapp-table组件地址：uni-app官网

1.结构：

<view class="uni-container"><uni-table ref="table" border stripe emptyText="暂无更多数据"><uni-tr><uni-th align="center" v-for="(header, index) in tableInfo.columns":key="index">{{header.label}}</uni-th></uni-tr><uni-tr v-for="(item, i) in tableInfo.list" :key="i" @click="goToDetail(item)"><uni-td align="center" v-for="(header, index) in tableInfo.columns" :key="index">{{item[header['name']] }}</uni-td></uni-tr></uni-table></view>