Vue v-for 循环双列或多列

目录

• 代码

 

---

回到顶部

代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

<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>