vue 移动端表格组件封装

最近公司在做一个APP，用vue+cordova，ui选用的是vant，因为涉及到了表格，奈何vant里没有这个组件，自己就简单的封装了一下，效果图：

看代码：

<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.prop] }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
   props:{
      bgcolor: Object,
      tableData:Array,
      option:Object
   },
  created() {}
};
</script>

<style lang="less" scoped>
.vant-table {
  .table {
     border-radius: .185185rem;
    .th {
      height: 1.074074rem;
      line-height: 1.074074rem;
      background-color: #393943;
      text-align: center;
      border-top-left-radius: .185185rem;
      border-top-right-radius: .185185rem;
    }
    .list-tr {
      height: 1.074074rem;
      line-height: 1.074074rem;
    }
    .list-tr:nth-child(2n) {
      background-color: #33333b;
    }
  }
}
</style>

至于为什么用到table标签，因为好控制~ hhhhhh