基于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>
相关推荐
酥饼~32 分钟前
html固定头和第一列简单例子
前端·javascript·html
m0_7482509337 分钟前
html 通用错误页面
前端·html
前端Hardy1 小时前
HTML&CSS:超炫丝滑的卡片水波纹效果
前端·javascript·css·3d·html
技术思考者1 小时前
HTML速查
前端·css·html
缺少动力的火车1 小时前
Java前端基础—HTML
java·前端·html
xcLeigh4 小时前
HTML5实现好看的圣诞节网站源码
前端·html·html5·圣诞节
鑫~阳10 小时前
html + css 淘宝网实战
前端·css·html
Catherinemin10 小时前
CSS|14 z-index
前端·css
NoneCoder12 小时前
CSS系列(36)-- Containment详解
前端·css
锦亦之223313 小时前
cesium入门学习二
学习·html