element的表格横向展示数组如何实现（组合数组）

有时候产品需求需要一个横向展示数据的表，但是element官网的demo只有竖着展示的表。

实现这个表有2种方式，第一种是使用html自己画表格然后再循环数据，第二种就是使用element-table来实现。

下面描述一下实现过程：

效果图：

 html：

<el-table
        :data="dataNumberList" 
        border>
        <el-table-column
          :prop="item.state"
          :label="item.name" v-for="(item,index) in dataNameList" :key="index" align="center">
        </el-table-column>
 </el-table>

js：

this.dataNameList.push({id:0,name:'日期',state:'name'})
let arr=[]
for(var i=1;i<31;i++){
    //表头
    let obj={
       id:i,
       name:String(i),
       state:'name'+i
    }
    this.dataNameList.push(obj)
    //值
    let obj1=`{name${i}:${i*10}}`
    let objA=eval("("+obj1+")")
    arr.push(objA)
}
let newObj={}
arr.push({name:'基础客户数'})
for(var i=0;i<arr.length;i++){
   newObj = { ...newObj, ...arr[i] }
}
this.dataNumberList.push(newObj)

额外说明：

首先需要创建一个动态的表头，这个地方我是使用了2个数组，一个数组，专门来展示动态表头，

然后再table的data里面填入需要展示的值。

动态创建健值对：

方式一：

for(var i=1;i<31;i++){
  let obj1=`{name${i}:${i*10}}`
  let objA=eval("("+obj1+")")//一定要加这个括号，把字符串转成对象
  arr.push(objA)
}

方式二：

 for(let j=0;j<res.data.length;j++){
  let item=res.data[j]
  let key=`${j+1}`
  let value=`${item.id}`
  let obj2={}
  obj2[key]=value;
  arr1.push(obj2) 
}

 

把数组内的多条数据合并成一条数据：

let newObj={}
arr.push({name:'基础客户数'})
for(var i=0;i<arr.length;i++){
   newObj = { ...newObj, ...arr[i] }
}

小拓展：

element-table里面slot-scope对象的参数有：

属性row(行)，column(列)，$index(索引)