前言

在做大数据可视化项目以及后台管理系统，我用的都是vue全家桶+element-ui，这些项目中都会用到table表格，大家写table肯定不能一个一个的写死，毕竟现在都是数据驱动view,所以都是写好数据去循环列表。

一， 这里将介绍如何动态创建，添加。

            //创建
            let salesForLists = {};
            for (let k = 0; k < skuAreaVoList.length; k++) {
              let priceLis = "price" + k;
            //动态给json对象赋值
              salesForLists[priceLis] =skuAreaVoList[k].price;
            }
       这里的写法将动态创建一个json并且赋值为price0,price1
         console.log(salesForLists );     结果 //  {price0: 5000, price1: 5000, price2: 5000}
    element-ui需要的数据结构.这里的结果将需要跟SalesAreaNo的数据（下标）匹配
     this.countryForLists[0] = salesForLists

二， 下面我放个例子，会详细介绍，以方便后续开发

其实这离后台配合一下的话，name数据根据自己的要求返回，就会很简单，如果不行，则自己处理数据，我就是自己处理，就需要用到这个

            //SalesAreaNo这个数据是来动态显示表头的
               <el-table :data="countryForLists">
                      <el-table-column
                        v-for="(item,index) in SalesAreaNo"
                        :key="index"
                        :label="item.country"
                        header-align="center"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <span>
                                   //   这里是来获取每个表头对应的值，前边已经说过了
                                      //  element-ui需要的数据结构.这里的结果将需要跟SalesAreaNo的数据（下标）匹配
                                 {{(scope.row[`price${index}`]/100).toFixed(2)}}
                            </span>
                        </template>
                      </el-table-column>
                  </el-table>