基于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>
相关推荐
a_靖10 分钟前
uniapp使用全局组件,
uni-app·全局组件
lqj_本人38 分钟前
鸿蒙OS&UniApp制作一个小巧的图片浏览器#三方框架 #Uniapp
华为·uni-app·harmonyos
向明天乄2 小时前
uni-app微信小程序登录流程详解
微信小程序·uni-app
酷爱码3 小时前
HTML5表格语法格式详解
前端·html·html5
美酒没故事°4 小时前
纯css实现蜂窝效果
前端·javascript·css
lqj_本人4 小时前
鸿蒙OS&UniApp 开发的下拉刷新与上拉加载列表#三方框架 #Uniapp
华为·uni-app·harmonyos
酷爱码4 小时前
HTML5中的Microdata与历史记录管理详解
前端·html
啊啊啊~~5 小时前
歌词滚动效果
javascript·html
lqj_本人5 小时前
鸿蒙OS&UniApp 制作个人信息编辑界面与头像上传功能#三方框架 #Uniapp
uni-app·harmonyos
lqj_本人5 小时前
鸿蒙OS&UniApp 实现的二维码扫描与生成组件#三方框架 #Uniapp
uni-app