Vue v-for 循环双列或多列

代码

<template>
  <div>
    <table class="data-table" v-if="arrLen>0">
      <tr v-for="index of arrLen" :key="index + 'x'">
        <td class="td-lable">{{ showData[index-1].txt }}</td>
        <td class="td-value">{{ showData[index-1].value }}</td>
        <template v-if="arrLen % 2 == 0">
          <td class="td-lable">{{ showData[index].txt }}</td>
          <td class="td-value">{{ showData[index].value }}</td>
        </template>
        <template v-else>
          <td class="td-lable"></td>
          <td class="td-value"></td>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "xxx",
  data(){
    return{
      showData:[{
        txt: 1,
        value: 2
      }]
    }
  },
  computed: {
    arrLen() {
      let len = Math.floor(this.showData.length / 2);
      if (len == 0) {
        len = len + 1
      }
      return len
    }
  },

}
</script>

<style scoped>

</style>