iview table tr td原生单元格表格

效果如图:

// 组件
<template>
  <div class='container'>
    <table class='billDetail' cellspacing='0'>
        <tr v-show='moreFlag == 1' v-for='index in rowNbr'>
          <td>{{tableData[index*4-4] !== undefined ? tableData[index*4-4].key : ''}}</td>
          <td>{{tableData[index*4-4] !== undefined ? tableData[index*4-4].value: ''}}</td>
          <td>{{tableData[index*4-3] !== undefined ? tableData[index*4-3].key : ''}}</td>
          <td>{{tableData[index*4-3] !== undefined ? tableData[index*4-3].value: ''}}</td>
          <td>{{tableData[index*4-2] !== undefined ? tableData[index*4-2].key : ''}}</td>
          <td>{{tableData[index*4-2] !== undefined ? tableData[index*4-2].value: ''}}</td>
          <td>{{tableData[index*4-1] !== undefined ? tableData[index*4-1].key : ''}}</td>
          <td>{{tableData[index*4-1] !== undefined ? tableData[index*4-1].value: ''}}</td>
        </tr>
        <tr v-show='moreFlag == 2' v-for='index in rowNbr'>
          <td>{{tableData[index*3-3] !== undefined ? tableData[index*4-3].key : ''}}</td>
          <td>{{tableData[index*3-3] !== undefined ? tableData[index*3-3].value: ''}}</td>
          <td>{{tableData[index*3-2] !== undefined ? tableData[index*3-2].key : ''}}</td>
          <td>{{tableData[index*3-2] !== undefined ? tableData[index*3-2].value: ''}}</td>
          <td>{{tableData[index*3-1] !== undefined ? tableData[index*3-1].key : ''}}</td>
          <td>{{tableData[index*3-1] !== undefined ? tableData[index*3-1].value: ''}}</td>
        </tr>
    </table>

    <table class='reqBill' cellspacing='0'>
      <tr v-show='moreFlag == 3' v-for='index in rowNbr' class='none'>
        <td>{{tableData[index*2-2] !== undefined ? tableData[index*2-2].key: ''}}</td>
        <td clospan='2'>{{tableData[index*2-2] !== undefined ? tableData[index*2-2].value: ''}}</td>
         <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key: ''}}</td>
          <td clospan='2'>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value: ''}}</td>
      </tr>
    </table>

    <table class='accountBill' cellspacing='0'>
       <tr v-show='moreFlag == 4' v-for='index in rowNbr'>
         <td>{{tableData[index*2-2] !== undefined ? tableData[index*2-2].key: ''}}</td>
         <td>{{tableData[index*2-2] !== undefined ? tableData[index*2-2].value: ''}}</td>
         <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value: ''}}</td>
       </tr>
    </table>
  </div>
</template>
<script>
  export default {
     props: {
        tableData:{type: Array},
        rowNbr: {type: Number},
        moreFlag: {type: Number},
        functionC: {type: Function},
     }
  }
</script>
<style lang='less' scoped>
  .container{
    .billDetail,.accountBill,
    .billDetail tr td,
    .accountBill tr td {
       border: 1px solid rgb(220, 222, 226)
    }
    .reqBill,.accountBill,
    .reqBill tr td,
    .accountBill tr td {
      border-top: 1px solid rgb(220, 222, 226)
      border-left: 1px solid rgb(220, 222, 226)
      border-right: 1px solid rgb(220, 222, 226)
    }
    .billDetail,
    .accountBill,
    .reqBill {
      table-layout: fixed;
      font-size: 14px;
      color: #000;
      width: 95%;
      text-align:center;
    }
    .billDetail tr td,
    .accountBill tr td,
    .reqBill tr td {
       height: 1.87rem;
    }
    .billDetail tr td:nth-child(old),
    .accountBill tr td:nth-child(1),
    .reqBill tr td:nth-child(old) {
      background-color: rgb(242, 242, 242)
    }
  }
</style>





// 用组件
<template>
   <Table :rowNbr='2' :tableData='tableData' :moreFlag='2'/>
</template>
<script>
import Table from 'compoents/Table'      // 自己项目中放组件的位置
export default {
  components: { Table }
  data() {
    return {
      tableData: [
        { key:'姓名', label: '', value: 'bob'},
        { key:'年龄', label: '', value: '24'},
        { key:'性别', label: '', value: '男'},
        { key:'身高', label: '', value: '178'},
      ]
    }
  }
  created(){
    // 接口中换数据
    // this.tableData[i].value = resp.data[this.tableData[i].label]
  }
}
</script>