h5原生table封装

<template>
  <table class='tableCom'
         width="100%"
         align="center"
         cellpadding="0"
         cellspacing="0">
    <thead>
      <tr align='center'
          class="thead_tr">
        <td v-for="(item,ind) in tableHead"
            :key="ind"
            :width='item.width'
            :style="{paddingLeft: item.paddingLeft,paddingRight: item.paddingRight}"
            :align="item.alignHeader || 'center'"
            class="thead_td">{{item.text}}</td>
      </tr>
    </thead>
    <tbody v-if='tableData.length'>
      <tr v-for="(item,index) in tableData"
          :key="index"
          :class="['tbody_tr', bt_none ? 'bt_none' : '']">
        <td v-for="(content,i) in tableHead"
            :key="i"
            :width='content.width'
            :style="{paddingLeft: content.paddingLeft, paddingRight: content.paddingRight}"
            :align="content.align || 'center'"
            class="tbody_td">
          <span v-if='content.unitObj'>
            <span v-for='(value, key, idx) in content.unitObj'
                  :key='idx'>
              {{item[key] != 0 ? item[key] : ''}}{{item[key]>0 ? value : ''}}
            </span>
          </span>
          <span v-else>{{item[content.prop]}}{{content.unit}}</span>
        </td>
        <!-- 整改成果的单位 如果amountMoney有值 就是万元 如果amountNumber有值 就是个 -->
      </tr>
    </tbody>
    <tbody v-if='!tableData.length'>
      <tr>
        <td class='pt_15'
            :colspan="tableHead.length"
            align='center'>暂无数据</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'tableCom',
  props: {
    tableHead: {
      type: Array,
      default () {
        return []
      }
    },
    tableData: {
      type: Array,
      default () {
        return []
      }
    },
    bt_none: {
      type: Boolean,
      default () {
        return false
      }
    }
  },  
  data() {
    return {}
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.tableCom {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  thead {
    .thead_tr {
      width: 100%;
      font-size: 13px;
      padding: 9px 0;
      background: rgba($color: #3480ff, $alpha: 0.1);
      .thead_td {
        padding: 9px 0;
      }
    }
  }

  .tbody_tr {
    margin: 0 10px;

    .tbody_td {
      font-size: 11px;
      // max-width: 50px;
      padding: 10px 0;
      word-wrap: break-word;
      word-break: break-all;
      // &:first-child {
      //   padding-left: 10px;
      // }
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        border-bottom: 0.5px solid #bcbcbc;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
  }

  .pt_15 {
    padding-top: 15px;
  }

  .bt_none {
    &:last-child {
      .tbody_td {
        &::after {
          border: none;
        }
      }
    }
  }
}
</style>

引入组件

<table-com :bt_none='true'
               :tableHead='tableHead'
               :tableData='tableData'></table-com>

tableHead: [
        {
          text: '整改项目 ',
          prop: 'quantify',
          width: '30%',
          align: 'left',
          alignHeader: 'left',
          paddingLeft: '20px'
        },
        {
          text: '整改明细 ',
          prop: 'field',
          width: '30%',
          align: 'left',
          alignHeader: 'left',
          paddingLeft: '20px'
        },
        {
          text: '整改成果',
          // prop: 'amountMoney',
          width: '40%',
          align: 'right',
          unitObj: {
            amountMoney: '万元',
            amountNumber: '个',
          },
          alignHeader: 'right',
          paddingRight: '20px'
        },

      ]

有好的方式望告知，谢谢