基于uniapp封装的table组件

数据格式

复制代码
tableData: [
        {
          elcInfo: [{
            tableData:[
                1,
              293021.1,
              293021.1,
              293021.1,
              293021.1,
            ]
          }]
        },
        {
          elcInfo: [{
            tableData:[
              1,
              293021.1,
              293021.1,
              293021.1,
              293021.1,
            ]
          }]
        },
        {
          elcInfo: [{
            tableData:[
              1,
              293021.1,
              293021.1,
              293021.1,
              293021.1,
            ]
          }]
        },
       /* {
          title: "2",
          elcInfo: [{
            tableData:[
              293021.1,
              293021.1,
              293021.1,
              293021.1,
            ]
          }]
        },
        {
          title: "3",
          elcInfo: [{
            tableData:[
              293021.1,
              293021.1,
              293021.1,
              293021.1,
            ]
          }]
        },*/
      ],
      tableHeader: {
        dateData: [
      '序号', "结算类型","电量","电价","电费"
        ]
      },

子组件:

复制代码
<template>
  <u-table>
    <u-tr>
      <u-th v-for="item in header">{{item}}</u-th>
    </u-tr>
    <u-tr v-for="item in data">
      <u-td v-for="i in item">{{ i }}</u-td>
    </u-tr>
  </u-table>
</template>

<script>
export default {
  name: "XTable",
  props: {
    header: {
      type: Object,
      default: {},
    },
    data: [],
  },
}
</script>
相关推荐
BioRunYiXue7 小时前
使用docker分析高通量测序数据
java·数据库·人工智能·spring cloud·docker·tomcat·html
一渊之隔7 小时前
uniapp BLE 开发踩坑:小米手机数据接收截断问题排查全记录
智能手机·uni-app
阿俊-全栈开发7 小时前
LikeShop 单商户标准版 UniApp 端二开:页面组件复用与自定义主题适配
uni-app·likeshop开源商城·likeshop单商户标准版·多商户源码
feixing_fx8 小时前
CSS Grid 入门:二维布局时代的降维打击
前端·css·前端框架·css3
2603_965896628 小时前
CSS BEM 命名规范|组件化样式分层权威指南
前端·javascript·css
进击的明明8 小时前
前端开发中的 BEM 国际命名规范:让 CSS 不再"打架"
前端·css·html
燕落南枝10 小时前
CSS 分组选择器与链接伪类选择器详解
前端·css
半生过往13 小时前
uni-app多端项目工作笔记
笔记·uni-app
烂蜻蜓14 小时前
Pandas入门教程(十二):读取 HTML 表格——read_html 参数详解与网页数据清洗
python·html·pandas
溪语流沙15 小时前
【每天一个CSS | Day33】聚焦即弹出的命令面板
前端·css·html5·组件·每日一练