基于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>
相关推荐
面向星辰10 分钟前
html各种常用标签
前端·javascript·html
Alice-YUE7 小时前
【css学习笔记8】html5css3新特性
css·笔记·学习
百思可瑞教育8 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
沐墨专攻技术8 小时前
二、网页的“化妆师”:从零学习 CSS
css·笔记·学习
风早爽太10 小时前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
Autumn_yun10 小时前
uniapp 实现项目多语言切换
uni-app
少年阿闯~~11 小时前
transition(过渡)和animation(动画)——CSS
前端·css·动画·过渡
Async Cipher11 小时前
CSS 继承 (Inheritance)
前端·css
懒大王952712 小时前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王952712 小时前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts