Vue v-for 循环双列或多列

代码

<template>
  <div>
    <table class="data-table" v-if="arrLen > 0">

      <tr v-for="index of arrLen" :key="index + 'x'">
        <td :class="[currentIndex == (index * 2 - 2) ? 'active-back' : '', 'td-lable']"
          @click="tdOnClick(monitorTableData[index * 2 - 2].devicebm, index * 2 - 2)">{{ monitorTableData[index * 2 -
              2].configdesc
          }}
        </td>
        <td :class="[currentIndex == (index * 2 - 2) ? 'active-back' : '', 'td-value']">{{ monitorTableData[index * 2 -
            2].monvalue + " "
            + monitorTableData[index * 2 - 2].units
        }}</td>
        <template v-if="(index * 2) <= dataLen">
          <td :class="[currentIndex == (index * 2 - 1) ? 'active-back' : '', 'td-lable']"
            @click="tdOnClick(monitorTableData[index * 2 - 1].devicebm, index * 2 - 1)">{{ monitorTableData[index * 2
                - 1].configdesc
            }}</td>
          <td :class="[currentIndex == (index * 2 - 1) ? 'active-back' : '', 'td-value']">{{ monitorTableData[index * 2
              - 1].monvalue + " " +
              monitorTableData[index * 2 - 1].units
          }}</td>
        </template>
        <template v-else>
          <td class="td-lable"></td>
          <td class="td-value"></td>
        </template>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "XcajMonitorTable",
  props: {
    monitorTableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    tdOnClick(devicebm, index) {
      window.getChartData(devicebm);
      this.$store.commit("oneMapData/setCurrentIndex", index)
      console.log(this.monitorTableData);
    }
  },
  computed: {
    arrLen() {
      let len = Math.floor(this.monitorTableData.length / 2);

      //如果数据 为奇数 加1
      if (this.monitorTableData.length % 2 == 1) {
        len = len + 1
      }
      return len
    },
    dataLen() {
      return this.monitorTableData.length
    },
    currentIndex() {
      return this.$store.state.oneMapData.currentIndex
    }
  },

}
</script>

<style scoped>
.active-back {
  background-color: rgba(0, 186, 255, 0.8)
}

.data-table thead,
.data-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.data-table {
  color: #ffffff;
  border-collapse: collapse;
  text-align: center;
  margin-top: 0px;
  margin-left: 10px;
}

.data-table .td-lable {
  border: 1px solid rgba(255, 255, 255, 0.45);
  height: 25px;
  width: 140px;
}

.data-table .td-value {
  border: 1px solid rgba(255, 255, 255, 0.45);
  height: 25px;
  width: 120px;
}

.td-lable {
  background: rgba(0, 186, 255, 0.45);
}
</style>