vue实现点击左侧菜单，右侧跟着显示隐藏

Posted 2020-11-25 cinderellastory

 

 

  1 <template>
  2   <div class="mainMaterial">
  3     <div class="chooseItem">
  4       <div class="navMenus">
  5         <ul>
  6           <li v-for="(item,index) in items" :key="index" :class="{active:index==isActive}" @click="onChange(index)">{{ item.spaceName }}</li>
  7         </ul>
  8       </div>
  9     </div>
 10     <div class="content">
 11       <ul>
 12         <li v-for="(item,index) in findMaterielListVos" :key="index">
 13           <p class="categoryName">{{ item.classifyCategoryName }}</p>
 14           <div class="materialDetail">
 15             <div class="detailsLeft">
 16               <img src="./../../assets/business/material.jpg" alt="">
 17             </div>
 18             <div class="detailsRight">
 19               <p>
 20                 <span>{{ item.spaceName }}</span>
 21                 <span>{{ item.categoryName }}</span>
 22               </p>
 23               <p class="price">
 24                 <span>单价：{{ item.price }}元</span>
 25                 <span>X{{ item.num }}</span>
 26               </p>
 27               <p class="total">
 28                 <span>合计：{{ item.amount }}元</span>
 29               </p>
 30             </div>
 31           </div>
 32         </li>
 33       </ul>
 34     </div>
 35   </div>
 36 </template>
 37 
 38 <script>
 39 export default {
 40   data() {
 41     return {
 42       isActive: false,
 43       result: [],
 44       items: [
 45         {
 46           ‘spaceName‘: ‘主卧‘,
 47           findMaterielListVos: [
 48             {
 49               ‘classifyCategoryName‘: ‘瓷砖类-地砖/墙砖‘,
 50               ‘spaceName‘: ‘主卧‘,
 51               ‘price‘: 78.00,
 52               ‘amount‘: 79.0000,
 53               ‘brandName‘: ‘欧神诺‘,
 54               ‘categoryName‘: ‘地砖/墙砖‘,
 55               ‘num‘: 1.00
 56             },
 57             {
 58               ‘classifyCategoryName‘: ‘电器类-油烟机‘,
 59               ‘spaceName‘: ‘主卧‘,
 60               ‘price‘: 2380.00,
 61               ‘amount‘: 2380.0000,
 62               ‘brandName‘: ‘美的‘,
 63               ‘categoryName‘: ‘油烟机‘,
 64               ‘classifyName‘: ‘电器类‘,
 65               ‘num‘: 1.00
 66             },
 67             {
 68               ‘classifyCategoryName‘: ‘开关面板类-开关面板‘,
 69               ‘spaceName‘: ‘主卧‘,
 70               ‘price‘: 2380.00,
 71               ‘amount‘: 2380.0000,
 72               ‘brandName‘: ‘美的‘,
 73               ‘categoryName‘: ‘油烟机‘,
 74               ‘num‘: 1.00
 75             },
 76             {
 77               ‘classifyCategoryName‘: ‘橱柜类-柜体‘,
 78               ‘spaceName‘: ‘主卧‘,
 79               ‘relateCode‘: ‘bc-cl-13773‘,
 80               ‘relateName‘: ‘测试材料‘,
 81               ‘brandName‘: ‘TOTO‘,
 82               ‘price‘: 0.00,
 83               ‘amount‘: 0.0000,
 84               ‘categoryName‘: ‘柜体‘,
 85               ‘classifyName‘: ‘橱柜类‘,
 86               ‘num‘: 1.00
 87             }
 88           ]
 89         },
 90         {
 91           ‘spaceName‘: ‘厨房‘,
 92           findMaterielListVos: [
 93             {
 94               ‘classifyCategoryName‘: ‘瓷砖类-地砖/墙砖‘,
 95               ‘id‘: 39759,
 96               ‘spaceName‘: ‘厨房‘,
 97               ‘relateCode‘: ‘cl-cz-qdz-osn-0000489‘,
 98               ‘relateName‘: ‘大理石鱼肚白‘,
 99               ‘price‘: 78.00,
100               ‘amount‘: 79.0000,
101               ‘remark‘: ‘额外费用:1.00元;‘,
102               ‘brandName‘: ‘欧神诺‘,
103               ‘model‘: ‘ELX00180S‘,
104               ‘categoryName‘: ‘地砖/墙砖‘,
105               ‘classifyName‘: ‘瓷砖类‘,
106               ‘materieldetailRecordStr‘: ‘额外费用:1.00元;‘,
107               ‘num‘: 1.00
108             }
109           ]
110         }
111       ]
112     }
113   },
114   created() {
115     this.findMaterielListVos = this.items[0].findMaterielListVos
116     this.result = this.items
117   },
118   methods: {
119     onChange(index) {
120       this.isActive = index
121       let array = []
122       for (let i = 0; i < this.result.length; i++) {
123         if (index === i) {
124           this.items[i] = this.result[i]
125           array = this.items[i].findMaterielListVos
126         }
127       }
128       this.findMaterielListVos = array
129     }
130   }
131 }
132 </script>
133 
134 <style scoped lang="less">
135 .empty{
136   text-align: center;
137   font-size: 14px;
138   margin-top:20px;
139   color: #9c9c9c;
140 }
141 .mainMaterial{
142   display: flex;
143   height: 100vh;
144   .chooseItem{
145     background: #fff;
146     width: 30%;
147     .navMenus{
148       ul{
149         li{
150           text-align: center;
151           padding:10px 0;
152           border-bottom: 1px solid #e3e3e3;
153           &.active{
154             background: #EA5520;
155             color: #fff;
156           }
157         }
158       }
159     }
160   }
161   .content{
162     background: #fff;
163     margin-left: 6px;
164     padding-left: 10px;
165     width: 70%;
166     ul{
167       li{
168         border-bottom: 1px solid #e3e3e3;
169         padding-top: 10px;
170         padding-bottom: 10px;
171         .categoryName{
172           color: #333;
173           font-size: 16px;
174           padding-bottom: 10px;
175         }
176         .materialDetail{
177           display: flex;
178           align-items: center;
179           .detailsLeft{
180            img{
181              width: 110px;
182              height: 70px;
183            }
184           }
185           .detailsRight{
186             margin-left: 8px;
187             width: 50%;
188             p{
189               color: #333;
190               font-size: 15px;
191               line-height: 24px;
192               &.price{
193                 font-size: 13px;
194                 color: #666;
195                 display: flex;
196                 justify-content: space-between;
197               }
198               &.total{
199                 color:#EA5520;
200               }
201             }
202           }
203         }
204       }
205     }
206   }
207 }
208 </style>