基于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>
相关推荐
是立不是利12 小时前
写给设计师的 CSS 博客美学指南
前端·css
labixiong18 小时前
CSS 锚点定位实测:零 JS 实现气泡跟随,自动翻转很香但暗藏 3 个致命坑
前端·css
芳心粽伙饭19 小时前
CSS第一章 CSS引入
前端·css
梦曦i1 天前
unix-router v0.1.0 首发:uni-app x 的 vue-router 风格路由库
前端·uni-app
Linsk1 天前
妙用:focus解决0到auto高度过渡的边界场景
前端·css
এ慕ོ冬℘゜1 天前
html理论
前端·html
是立不是利1 天前
HTML 的尊严:一种被低估的语言
前端·html
芳心粽伙饭1 天前
CSS第二章 选择器
前端·css
anOnion1 天前
构建无障碍组件之Landmarks Pattern
前端·html·交互设计
xy34532 天前
Axure9.0中继器遮罩实现方法
前端·ui·html·axure·原型·产品设计