Vue & ElementUI经验总结

下拉框选项从后台获取并设置第一个默认选中

<div class="selectBox">
    <span>品牌</span>
    <el-select v-model="businessPreSelect" placeholder="请选择" size="mini" class="select" @change='change'>
        <el-option
          v-for="item in businessSelect"
          :key="item.brandId"
          :label="item.brandName"
          :value="item.brandId">
        </el-option>
    </el-select>
</div>
data(){
      return{
        businessPreSelect: '',
        businessSelect: []
      }
   }
methods:{
    //初始化品牌下拉
    initBussinessSel(){
        getHeziSalesPlanParams().then(res => {
            this.businessSelect = res.data //获取所有选项，包含brandId和brandName的对象数组
            if(this.businessSelect != null){
                this.businessPreSelect = this.businessSelect[0].brandId // 预选中第一项
            }
        }).catch(error => {
            console.log(error)
            reject(error)
        })
    }
}

 

横向展示表格数据

elementUI的表格默认是根据字段名对应来一个列一个列的展示的。

目前的数据格式是这样：其实就是包括2019年和2020年各月份的销量值。

[{"id":615,"tag":"乘用车","month":1,"lastYear":2019,"lastYearSales":2211,"nextYear":2020,"nextYearSales":1763,"growthRate":"-20.3%"},
{"id":616,"tag":"乘用车","month":2,"lastYear":2019,"lastYearSales":1173,"nextYear":2020,"nextYearSales":253,"growthRate":"-78.4%"},
{"id":617,"tag":"乘用车","month":3,"lastYear":2019,"lastYearSales":1791,"nextYear":2020,"nextYearSales":1079,"growthRate":"-39.8%"},
{"id":618,"tag":"乘用车","month":4,"lastYear":2019,"lastYearSales":null,"nextYear":2020,"nextYearSales":1498,"growthRate":"-4.4%"},
{"id":619,"tag":"乘用车","month":5,"lastYear":2019,"lastYearSales":1642,"nextYear":2020,"nextYearSales":1664,"growthRate":"1.4%"},
{"id":620,"tag":"乘用车","month":6,"lastYear":2019,"lastYearSales":1844,"nextYear":2020,"nextYearSales":1716,"growthRate":"-6.9%"},
{"id":621,"tag":"乘用车","month":7,"lastYear":2019,"lastYearSales":1540,"nextYear":2020,"nextYearSales":1650,"growthRate":"7.2%"},
{"id":622,"tag":"乘用车","month":8,"lastYear":2019,"lastYearSales":1611,"nextYear":2020,"nextYearSales":1750,"growthRate":"8.6%"},
{"id":623,"tag":"乘用车","month":9,"lastYear":2019,"lastYearSales":1840,"nextYear":2020,"nextYearSales":1860,"growthRate":"1.1%"},
{"id":624,"tag":"乘用车","month":10,"lastYear":2019,"lastYearSales":1875,"nextYear":2020,"nextYearSales":1860,"growthRate":"-0.8%"},
{"id":625,"tag":"乘用车","month":11,"lastYear":2019,"lastYearSales":1980,"nextYear":2020,"nextYearSales":1920,"growthRate":"-3%"},
{"id":626,"tag":"乘用车","month":12,"lastYear":2019,"lastYearSales":2200,"nextYear":2020,"nextYearSales":1987,"growthRate":"-9.7%"}]

 

 目前展示出来的数据，month字段肯定是全都排在一列的。但是我想让month根据不同的月份值单独一列，像下面这样：

实现方式：

首先需要将数据重新处理一下，将所有的数值提取出来：

//遍历对象数组将所有的月销量属性值取出来，放到一个数组里面
let arr1 = []
let arr2 = []
//遍历对象数组获取nextYear和lastYear的值，所有的都一样，所以只遍历一次就够了
for(let key in this.heziBrandPerformanceList[0]){
    if(key == 'lastYear'){
        arr1[0] = this.heziBrandPerformanceList[0][key]
    }
    if(key == 'nextYear'){
        arr2[0] = this.heziBrandPerformanceList[0][key]
    }
}
this.lastYearSalesArr = this.heziBrandPerformanceList.map(function (item) {
    arr1.push(item.lastYearSales)
    return item.lastYearSales
})
this.nextYearSalesArr = this.heziBrandPerformanceList.map(function (item) {
    arr2.push(item.nextYearSales)
    return item.nextYearSales
})
this.transPerformanceList.push(arr1)
this.transPerformanceList.push(arr2)

 

这样处理好的数据就是这样了，以年份开头，后面是各月份的值：

[[2019,2211,1173,1791,null,1642,1844,1540,1611,1840,1875,1980,2200],
[2020,1763,253,1079,1498,1664,1716,1650,1750,1860,1860,1920,1987]]

 

 最后，通过for循环的方式构建表格

data() {
    return {
        lastYearSalesArr: [], // 上一年销量数组
        nextYearSalesArr: [], // 下一年销量数组
        transPerformanceList:[],
        titleArr: ['', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }
}
<el-table
    :data="transPerformanceList"  数据源
    row-key="id"
    style="width: 100%;">
    <el-table-column
        v-for="(item, index) in titleArr"   自定义表头
        :key="index"
        :prop="item"
        :label="item">
        <template slot-scope="scope" >
            <span>{{ scope.row[index] }}</span>   循环遍历数组构建表格内容
        </template>
    </el-table-column>
</el-table>