van-collapse折叠面板组件使用

折叠面板的使用

话不多说，我们直接看代码吧，里面的数据就是自己随便写的，可以根据自己实际情况来！

     <template>
      <div>
          <van-collapse v-if="affairArray.length>4" v-model="activeNames">
                  <van-collapse-item name="1">
                      <template #title>
                            <div class="header-box">
                                   <span
                                        v-for="item in affairArray.slice(0,4)"
                                        :key="item.itemCode"
                                        :class="{active:active === item.itemCode}"
                                        @click.stop="onChange(item)"
                                   >{{item.itemValue}}</span>
                            </div>
                      </template>
                      <div class="header-box-two">
                                   <span
                                        v-for="item in affairArray.slice(4,affairArray.length+1)"
                                        :key="item.itemCode"
                                        :class="{active:active === item.itemCode}"
                                        @click.stop="onChange(item)"
                                   >{{item.itemValue}}</span>
                      </div>
                  </van-collapse-item>
          </van-collapse>
          <div v-else class="header">
                     <span
                         v-for="item in affairArray.slice(4,affairArray.length+1)"
                         :key="item.itemCode"
                         :class="{active:active === item.itemCode}"
                         @click.stop="onChange(item)"
                     >{{item.itemValue}}</span>
          </div>
        <div style="width:100%;margin-left:20px;margin-top:30px">
             <template>
              <el-table
                    class="tableBox"
                    :data="dataMap"
                    border
                    style="width:100%"
                    max-height="460px"
                    highlight-current-row
                    :header-cell-style="{background:'#d3dfeb',color:'black'}"
              >
                   <el-table-column
                               v-for="(item,index) in tableList"
                               :key="index+'tab'"
                               :label="item.label"
                               :prop="item.prop"
                               align="center"
                               :width="item.width"
                       >
                      
                   </el-table-column>
                   <el-table-column label="操作" align="center" v-if="this.dataMap.length>0">
                       <template v-slot="scope">
                                  <el-button @click="deletetable(scope.$index,scope.row)" type="danger" size="mini" >删除</el-button>
                       </template>
                   </el-table-column>
              </el-table>
              </template>
         </div>
      </div>
</template>
<script>
export default {
    data(){
        return {
             activeNames:['1'],
             active:'0101',
             tableList:[{label:'序号',prop:'id'},
                      {label:'日期',prop:'date'},
                      {label:'地区',prop:'address'},
                      {label:'天气',prop:'tianqi'},
                      {label:'温度',prop:'wendu'}], // 表头数据
             dataMap:[{id:1,date:'2021-12-12',address:'成都',tianqi:'晴朗 ☀️',wendu:'21'},
                        {id:2,date:'2021-12-12',address:'哈尔滨',tianqi:'大雪 ❄️',wendu:'-30'},
                        {id:3,date:'2021-12-12',address:'上海',tianqi:'晴朗 ☀️',wendu:'10'},
                        {id:4,date:'2021-12-12',address:'深圳',tianqi:'小雨 🌧️',wendu:'27'},
                        {id:5,date:'2021-12-12',address:'北京',tianqi:'大雪 ❄️',wendu:'-10'},
                        {id:6,date:'2021-12-12',address:'厦门',tianqi:'大雨 🌧️',wendu:'6'},
                        {id:7,date:'2021-12-12',address:'南京',tianqi:'小雪 ❄️',wendu:'-1'},
                        {id:8,date:'2021-12-12',address:'青岛',tianqi:'大雪 ❄️',wendu:'-18'},
                        {id:9,date:'2021-12-12',address:'天津',tianqi:'大雪 ❄️',wendu:'-19'}], //表体数据
             affairArray:[{itemCode:'0101',itemValue:'各项收入',orderNo:1},
                          {itemCode:'0102',itemValue:'各项支出',orderNo:2},
                          {itemCode:'0103',itemValue:'财务预算',orderNo:3},
                          {itemCode:'0104',itemValue:'各项财产',orderNo:4},
                          {itemCode:'0105',itemValue:'收益分配',orderNo:5},
                          {itemCode:'0106',itemValue:'项目资金',orderNo:6},
                          {itemCode:'0107',itemValue:'资产变动',orderNo:7},
                          {itemCode:'0108',itemValue:'财政总数',orderNo:8}]
        }
    },
    methods:{
        onChange(data){
            this.active=data.itemCode;
            if(data.itemCode=='0101'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'日期',prop:'date'},
                      {label:'地区',prop:'address'},
                      {label:'天气',prop:'tianqi'},
                      {label:'温度',prop:'wendu'},
                      ];
                     this.dataMap=[{id:1,date:'2021-12-12',address:'成都',tianqi:'晴朗 ☀️',wendu:'21'},
                        {id:2,date:'2021-12-12',address:'哈尔滨',tianqi:'大雪 ❄️',wendu:'-30'},
                        {id:3,date:'2021-12-12',address:'上海',tianqi:'晴朗 ☀️',wendu:'10'},
                        {id:4,date:'2021-12-12',address:'深圳',tianqi:'小雨 🌧️',wendu:'27'},
                        {id:5,date:'2021-12-12',address:'北京',tianqi:'大雪 ❄️',wendu:'-10'},
                        {id:6,date:'2021-12-12',address:'厦门',tianqi:'大雨 🌧️',wendu:'6'},
                        {id:7,date:'2021-12-12',address:'南京',tianqi:'小雪 ❄️',wendu:'-1'},
                        {id:8,date:'2021-12-12',address:'青岛',tianqi:'大雪 ❄️',wendu:'-18'},
                        {id:9,date:'2021-12-12',address:'天津',tianqi:'大雪 ❄️',wendu:'-19'},]
           }else if(data.itemCode=='0102'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'日期',prop:'date'},
                      {label:'地区',prop:'address'},
                      {label:'天气',prop:'tianqi'},
                      {label:'温度',prop:'wendu'},
                      ];
                     this.dataMap=[{id:1,date:'2021-12-22',address:'锦江区',tianqi:'晴 ☀️',wendu:'21'},
                        {id:2,date:'2021-12-23',address:'武侯区',tianqi:'雾 🌫️',wendu:'20'},
                        {id:3,date:'2021-12-24',address:'金牛区',tianqi:'小雨 🌧️',wendu:'10'},
                        {id:4,date:'2021-12-25',address:'高新区',tianqi:'多云 ☁️',wendu:'20'},
                        {id:5,date:'2021-12-26',address:'温江区',tianqi:'晴 ☀️',wendu:'10'},
                        {id:6,date:'2021-12-27',address:'青羊区',tianqi:'晴转多云 ⛅️',wendu:'6'},
                        ]
           }else if(data.itemCode=='0103'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'厂商',prop:'manufactor'},
                      {label:'车型',prop:'name'},
                      {label:'单价',prop:'sale'},
                      {label:'销量',prop:'count'},
                      ];
                     this.dataMap=[{id:1,manufactor:'北京奔驰',name:'奔驰E级',sale:'550000',count:'8061'},
                        {id:2,manufactor:'华晨宝马',name:'宝马5系',sale:'480000',count:'7692'},
                        {id:3,manufactor:'广汽本田',name:'本田雅阁',sale:'198000',count:'13987'},
                        {id:4,manufactor:'广汽丰田',name:'丰田凯美瑞',sale:'209999',count:'1028'},
                        {id:5,manufactor:'长安林肯',name:'林肯冒险家',sale:'210000',count:'8061'},
                        {id:6,manufactor:'小鹏汽车',name:'小鹏P7',sale:'270000',count:'3279'},
                        {id:7,manufactor:'理想汽车',name:'理想ONE',sale:'300000',count:'7908'},
                        {id:8,manufactor:'东风日产',name:'日产轩逸',sale:'109999',count:'12098'},
                        ]
           }else if(data.itemCode=='0104'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'国家',prop:'country'},
                      {label:'首都',prop:'capital'},
                      {label:'人口(亿)',prop:'people'},
                      {label:'GDP',prop:'GDP'},
                      ];
                     this.dataMap=[{id:1,country:'中国 🇨🇳',capital:'北京',people:'14.12',GDP:'3'},
                        {id:2,country:'美国 🇺🇸',capital:'华盛顿',people:'3.12',GDP:'5'},
                        {id:3,country:'日本 🇯🇵',capital:'东京',people:'2.1',GDP:'3.1'},
                        {id:4,country:'德国 🇩🇪',capital:'柏林',people:'1.2',GDP:'4'},
                        {id:5,country:'英国 🇬🇧',capital:'伦敦',people:'1.6',GDP:'6'},
                        {id:6,country:'瑞典 🇸🇪',capital:'斯德哥尔摩',people:'0.5',GDP:'4.6'},
                        {id:7,country:'法国 🇫🇷',capital:'巴黎',people:'1.3',GDP:'3.5'},
                        ]
           }else if(data.itemCode=='0105'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'国家',prop:'country'},
                      {label:'地区',prop:'address'},
                      {label:'型号',prop:'xinghao'},
                      {label:'销售平台',prop:'pingtai'},
                      {label:'价格',prop:'Price'},
                      ];
                     this.dataMap=[{id:1,country:'中国 🇨🇳',address:'成都',xinghao:'iphone13',pingtai:'线上',Price:'5399'},
                        {id:2,country:'美国 🇺🇸',address:'洛杉矶',xinghao:'iphone13pro',pingtai:'门店',Price:'10399'},
                        {id:3,country:'韩国 🇰🇷',address:'首尔',xinghao:'iphone13 promax',pingtai:'门店',Price:'20399'},
                        {id:4,country:'新加坡 🇸🇬',address:'新加坡',xinghao:'iphone12 pro',pingtai:'门店',Price:'15399'},
                        {id:5,country:'阿联酋 🇦🇪',address:'迪拜',xinghao:'iphone13 promax',pingtai:'门店',Price:'7399'},
                        {id:6,country:'英国 🇬🇧',address:'伦敦',xinghao:'iphone13',pingtai:'门店',Price:'6399'},
                        {id:7,country:'瑞典 🇸🇪',address:'斯德哥尔摩',xinghao:'iphone13',pingtai:'门店',Price:'6599'},
                        {id:8,country:'巴西 🇧🇷',address:'里约热内卢',xinghao:'iphone13',pingtai:'门店',Price:'8399'},
                        {id:9,country:'德国 🇩🇪',address:'汉堡',xinghao:'iphone13',pingtai:'门店',Price:'7399'}]
           }else if(data.itemCode=='0106'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'日期',prop:'date'},
                      {label:'地区',prop:'address'},
                      {label:'天气',prop:'tianqi'},
                      {label:'温度',prop:'wendu'},
                      ];
                     this.dataMap=[{id:1,date:'2021-12-12',address:'内蒙古',tianqi:'沙尘暴',wendu:'1'},
                        {id:2,date:'2021-12-12',address:'北京',tianqi:'沙尘暴',wendu:'-10'},
                        {id:3,date:'2021-12-12',address:'张家口',tianqi:'沙尘暴',wendu:'10'},
                        {id:4,date:'2021-12-12',address:'呼和浩特',tianqi:'沙尘暴',wendu:'2'},
                        {id:5,date:'2021-12-12',address:'巴彦卓儿',tianqi:'沙尘暴',wendu:'-10'},
                        {id:6,date:'2021-12-12',address:'银川',tianqi:'沙尘暴',wendu:'6'},
                        {id:7,date:'2021-12-12',address:'吴中',tianqi:'沙尘暴',wendu:'-1'},
                        {id:8,date:'2021-12-12',address:'宁夏',tianqi:'沙尘暴',wendu:'5'},
                        {id:9,date:'2021-12-12',address:'兰州',tianqi:'沙尘暴',wendu:'-19'},]
           }else if(data.itemCode=='0107'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'日期',prop:'date'},
                      {label:'地区',prop:'address'},
                      {label:'天气',prop:'tianqi'},
                      {label:'温度',prop:'wendu'},
                      ];
                     this.dataMap=[{id:1,date:'2021-12-12',address:'成都',tianqi:'暴雨',wendu:'21'},
                        {id:2,date:'2021-12-12',address:'广州',tianqi:'暴雨',wendu:'30'},
                        {id:3,date:'2021-12-12',address:'深圳',tianqi:'暴雨',wendu:'32'},
                        {id:4,date:'2021-12-12',address:'香港',tianqi:'暴雨',wendu:'27'},
                        {id:5,date:'2021-12-12',address:'北京',tianqi:'暴雨',wendu:'-10'},
                        {id:6,date:'2021-12-12',address:'福州',tianqi:'暴雨',wendu:'6'},
                        {id:7,date:'2021-12-12',address:'苏州',tianqi:'暴雨',wendu:'-1'},
                        {id:8,date:'2021-12-12',address:'杭州',tianqi:'暴雨',wendu:'5'},
                        {id:9,date:'2021-12-12',address:'天津',tianqi:'暴雨',wendu:'-19'},]
           }else if(data.itemCode=='0108'){
                     this.tableList=[{label:'序号',prop:'id'},
                      {label:'日期',prop:'date'},
                      {label:'地区',prop:'address'},
                      {label:'天气',prop:'tianqi'},
                      {label:'温度',prop:'wendu'},
                      ];
                     this.dataMap=[{id:1,date:'2021-12-12',address:'成都',tianqi:'晴朗',wendu:'21'},
                        {id:2,date:'2021-12-12',address:'沈阳',tianqi:'晴朗',wendu:'-30'},
                        {id:3,date:'2021-12-12',address:'广州',tianqi:'晴朗',wendu:'10'},
                        {id:4,date:'2021-12-12',address:'香港',tianqi:'晴朗',wendu:'27'},
                        {id:5,date:'2021-12-12',address:'北京',tianqi:'晴朗',wendu:'-10'},
                        {id:6,date:'2021-12-12',address:'福州',tianqi:'晴朗',wendu:'6'},
                        {id:7,date:'2021-12-12',address:'苏州',tianqi:'晴朗',wendu:'-1'},
                        {id:8,date:'2021-12-12',address:'杭州',tianqi:'晴朗',wendu:'5'},
                        {id:9,date:'2021-12-12',address:'天津',tianqi:'晴朗',wendu:'-19'},]
           }
        },
        // 表格删除事件
       deletetable(index,data){
             this.$confirm('确定删除该条信息？','提示',{
                 confirmButtonText:'确定',
                 cancelButtonText:'取消',
                 type:'warning',
             }).then(()=>{
                 this.$message({
                     type:'success',
                     message:'删除成功！'
                 })
                 this.dataMap.splice(index,1)
             }).catch(()=>{
                 this.$message({
                     type:'info',
                     message:'取消删除'
                 })
             })
       }
    }
}
</script>
<style lang="scss" scoped>
.header-box{
         width: 100%;
         display: flex;
         flex-wrap: wrap;
    span{
             font-size:14px;
             color:#4a4a4a;
             letter-spacing: 0.15px;
             font-weight: 400;
             display: inline-block;
             min-width: 22%;
             line-height: 30px;
             text-align: center;
         }
    .active{
         font-weight: 600;
         color:#27bf69
    }
}
.header-box-two{
         width: 100%;
         display: flex;
         flex-wrap: wrap;
    span{
             font-size:14px;
             color:#4a4a4a;
             letter-spacing: 0.15px;
             font-weight: 400;
             display: inline-block;
             min-width: 23%;
             line-height: 30px;
             text-align: center;
         }
    span:hover{
        cursor:pointer;
    }
    .active{
         font-weight: 600;
         color:#27bf69
    }
}
</style>