基于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>
相关推荐
浪裡遊43 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
耶啵奶膘1 小时前
uniapp——地图路线绘制map
uni-app
shadouqi1 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
拾光拾趣录2 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee2 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
走,带你去玩2 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
zhanshuo2 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
十盒半价3 小时前
前端性能优化避坑指南:从回流重绘到页面渲染全解析
前端·css·trae
veminhe3 小时前
html怎么设置html5
html·html5
AA-代码批发V哥4 小时前
HTML之表单结构全解析
前端·html