vant Table 封装

组件
<template>
  <div class="vant-table">
    <table cellspacing="0" :style="bgcolor" style="width:100%" class="table">
      <tr>
        <th class="th" v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
      </tr>
      <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
        <td v-for="(context, i) in option.column" :key="i">{{ item[context.tableDataprop] }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name:'TableVant',
  props:{
    bgcolor:{
      type: Object,
      default: {}
    },
    tableData:{
      type: Array,
      default: []
    },
    option:{
      type: Object,
      default: {}
    }
  },
  created() {}
};
</script>

<style  scoped>

.table {
  border-radius: .185185rem;

}
.th {
  height: 1.074074rem;
  line-height: 1.074074rem;
  background-color: #1d9eef;
  text-align: center;
}
.list-tr {
  height: 1.074074rem;
  line-height: 1.074074rem;
}
.list-tr:nth-child(2n) {
  /*background-color: #33333b;*/
}
td {
  text-align: center;
}
</style>

二、使用

<template>
 <div>
   <Table-vant :option="option" :tableData="tableData"></Table-vant>
 </div>
</template>
<script>
import TableVant from "../../../components/table/TableVant";

export default {
  components: {TableVant},
  data() {
    return {
      tableData: [
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "品牌",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "数量",
          totalPrice: 0
        },
        {
          closedAccount: 0,
          givePrice: 3,
          noAccount: 0,
          roomType: "赠送",
          totalPrice: 0
        },
        {
          closedAccount: 2,
          givePrice: 0,
          noAccount: 0,
          roomType: "合计",
          totalPrice: 0
        },
      ],
      //th
      option: {
        column: [
          {
            label: '房台类型',
            tableDataprop: 'roomType',

          },
          {
            label: '已结',
            tableDataprop: 'closedAccount'
          },
          {
            label: '未收款',
            tableDataprop: 'noAccount'
          },
          {
            label: '赠送',
            tableDataprop: 'givePrice'
          },
          {
            label: '合计',
            tableDataprop: 'totalPrice'
          }
        ]
      },

    }

  },
  created() {}
};
</script>

<style lang="less" scoped>

</style>