基于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>
相关推荐
木木黄木木1 小时前
HTML5图片裁剪工具实现详解
前端·html·html5
hunzi_11 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
FanetheDivine3 小时前
正确使用flex-1
css·html
芭拉拉小魔仙3 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
goto_w4 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白5 小时前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
木木黄木木6 小时前
HTML5重力球动画实现详解
前端·html·html5
吞掉星星的鲸鱼8 小时前
使用高德api实现天气查询
前端·javascript·css
hello_simon9 小时前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
zhougl99610 小时前
html处理Base文件流
linux·前端·html