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>