vue动态列表响应式布局

 

问题描述：选择哪个模块就显示什么

思路：通过标识来判断是否选择，动态控制列表长度及样式

页面渲染代码：

<div class="header_tabs">
        <ul>
         <li v-for="(item,index) in headertabs" :key="index" :class="setClass(headertabs)"> 
            <el-card class="update-log" style="text-align:center">
              <div slot="header" class="clearfix">
                <i :class="item.class"></i>&nbsp;&nbsp;<span>{{item.name}}</span>
              </div>
              <div class="body" style="font-size:16px;font-weight:bold">
                  {{item.tatol}}
              </div>
            </el-card>
          </li>
        </ul>
      </div>

 数据定义：

data() {
    return {
      headertabs:[ //将headerList中flag为true的放在这里
        {name:"总客户数",tatol:8,class:"el-icon-user",flag:true},
        {name:"总车辆",tatol:120,class:"el-icon-truck",flag:true},
        {name:"在线车辆",tatol:12,class:"el-icon-data-line",flag:true},
        {name:"主动安全",tatol:120,class:"el-icon-setting",flag:true},
        {name:"本月新增车辆",tatol:0,class:"el-icon-date",flag:true},
        {name:"今日报警",tatol:0,class:"el-icon-time",flag:true},
        {name:"未处理报警",tatol:0,class:"el-icon-close-notification",flag:true},
        {name:"今日行驶里程",tatol:10000,class:"el-icon-odometer",flag:true},
      ],
      headerList:[
        {name:"总客户数",tatol:8,class:"el-icon-user",flag:true},
        {name:"总车辆",tatol:120,class:"el-icon-truck",flag:true},
        {name:"在线车辆",tatol:12,class:"el-icon-data-line",flag:true},
        {name:"主动安全",tatol:120,class:"el-icon-setting",flag:true},
        {name:"本月新增车辆",tatol:0,class:"el-icon-date",flag:true},
        {name:"今日报警",tatol:0,class:"el-icon-time",flag:true},
        {name:"未处理报警",tatol:0,class:"el-icon-close-notification",flag:true},
        {name:"今日行驶里程",tatol:10000,class:"el-icon-odometer",flag:true},
        {name:"视频车辆",tatol:0,class:"el-icon-video-camera",flag:false}
      ],
    };
  },

js处理：

methods: {
    setClass(val){
      switch (val.length) {
        case 1:
          return "one";
        break;
        case 2:
          return "two";
        break;
        case 3:
          return "three";
        break;
        case 4:
          return "four";
        break;
        case 5:
          return "five";
        break;
        case 6:
          return "six";
        break;
        case 7:
          return "seven";
        break;
        case 8:
          return "eight";
        break;
        case 9:
          return "nine";
        break;
        default:
          break;
      }
    }
  },

css部分：

<style scoped lang="scss">
.header_tabs{
  width:100%;height:100px;padding:0 12px;
}
.header_tabs ul{
  width: 100%;
  height: 100%;
}
.one{
  width:100%;height:100%;
}
.two{
  width:49.5%;height:100%;float:left;margin-right: 1%;
}
.two:last-child{
  margin-right:0
}
.three{
  width:32.66%;height:100%;float:left;margin-right: 1%;
}
.three:last-child{
  margin-right:0
}
.four{
  width:24.25%;height:100%;float:left;margin-right: 1%;
}
.four:last-child{
  margin-right:0
}
.five{
  width:19.2%;height:100%;float:left;margin-right: 1%;
}
.five:last-child{
  margin-right:0
}
.six{
  width:15.83%;height:100%;float:left;margin-right: 1%;
}
.six:last-child{
  margin-right:0
}
.seven{
  width:13.42%;height:100%;float:left;margin-right: 1%;
}
.seven:last-child{
  margin-right:0
}
.eight{
  width:11.62%;height:100%;float:left;margin-right: 1%;
}
.eight:last-child{
  margin-right:0
}
.nine{
  width:10.22%;height:100%;float:left;margin-right: 1%;
}
.nine:last-child{
  margin-right:0
}
</style>