先上效果
1 <template> 2 <div class="simpTable"> 3 <table> 4 <thead> 5 <th 6 v-for="(item,index) of tableHeader" 7 :key="index" 8 >{{ item.label }}</th> 9 </thead> 10 <tbody> 11 <tr 12 v-for="(tr,trIndex) of tableData" 13 :key="trIndex" 14 > 15 <td 16 v-for="(td,tdIndex) of tableHeader" 17 :key="tdIndex" 18 > 19 {{ tr[td.prop] }} 20 </td> 21 </tr> 22 </tbody> 23 </table> 24 <div 25 v-if="!tableHeader.length || !tableData.length" 26 class="simpTable__noData" 27 > 暂无数据</div> 28 </div> 29 </template> 30 31 <script> 32 export default { 33 props: { 34 tableHeader: { 35 type: Array, 36 default: () => [ 37 { label: '工厂', prop: 'name' }, 38 { label: '预警天数', prop: 'value_a' }, 39 { label: '超库容数量', prop: 'value_b' } 40 ] 41 }, 42 tableData: { 43 type: Array, 44 default: () => [{ 45 name: 'a', 46 value_a: 100, 47 value_b: 190 48 }, 49 { 50 name: 'b', 51 value_a: 100, 52 value_b: 190 53 }, 54 { 55 name: 'b', 56 value_a: 100, 57 value_b: 190 58 }, 59 { 60 name: 'b', 61 value_a: 100, 62 value_b: 190 63 }, 64 { 65 name: 'c', 66 value_a: 100, 67 value_b: 190 68 }, 69 { 70 name: 'd', 71 value_a: 100, 72 value_b: 190 73 } 74 ] 75 }, 76 titleName: { 77 type: String, 78 default: '' 79 } 80 } 81 } 82 </script> 83 84 <style lang="scss" scope> 85 .simpTable { 86 width: 100%; 87 height: 100%; 88 box-sizing: border-box; 89 table { 90 display: inline-block; 91 width: 100%; 92 max-height: 150px; 93 overflow-y: hidden; 94 display: flex; 95 flex-direction: column; 96 font-size: 12px; 97 thead { 98 width: 100%; 99 display: flex; 100 color: #c9dcfb; 101 background: rgba(30, 116, 255, 0.16); 102 flex-shrink: 1; 103 th { 104 margin: auto; 105 flex: 1; 106 min-width: 50px; 107 height: 29px; 108 display: flex; 109 justify-content: center; 110 align-items: center; 111 white-space: nowrap; 112 } 113 } 114 tbody { 115 flex: 1; 116 display: inline-block; 117 width: 100%; 118 overflow-y: auto; 119 tr { 120 width: 100%; 121 display: flex; 122 align-items: center; 123 justify-content: space-between; 124 td { 125 height: 29px; 126 white-space: nowrap; 127 flex: 1; 128 display: flex; 129 align-items: center; 130 text-align: center; 131 justify-content: center; 132 background: rgba(30, 116, 255, 0.06); 133 border-top: solid 3px rgba(19, 25, 61, 1); 134 } 135 } 136 } 137 } 138 &__noData { 139 text-align: center; 140 display: inline-block; 141 width: 100%; 142 margin-top: 10%; 143 color: #ccc; 144 } 145 } 146 </style>
标签:flex,vue,name,value,width,表头,table,100,display From: https://www.cnblogs.com/yflbk-2016/p/16787204.html