element-ui动态生成表格。表头的名字不一样

╰半夏微凉° 2023-02-15 05:02 16阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

官网的是这样的。接口数据是已知的：日期，姓名，地址

所以可以直接写label。prop的写死

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1][]

如果表头数据是动态的不一定的。

我们应该怎么写呢？下面是接口给的表格的数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 2][]

可以观察看出来我们如果使用循环。就是循环el-table-column

> <el-table  
>       :data="tableData"  
>       style="width: 100%">  
>       <el-table-column  
>         prop="date"  
>         label="日期"  
>         width="180">  
>       </el-table-column>  在这个里面写循环。并且prop和label都变成动态的。那么我们就得知道表头参数名  
>     </el-table>

this.tableData=res.tablebase;//用一个变量接收接口给的数据。

然后把参数也就是表头的内容全部取出来。

this.tableheader=this.tableData.map(res=>\{

return **Object.keys(res);//取出对应的键名**

\})

然后知道这两个变量就可以实现循环了。

> <el-table  
>       :data="tableData"  
>       style="width: 100%">  
>       <el-table-column  v-for="item in  tableheader " :key="item"  
>         :prop="item"  
>         :label="item">  
>       </el-table-column>  在这个里面写循环。并且prop和label都变成动态的。那么我们就得知道表头参数名  
>     </el-table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604152657195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604152824758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020060415293979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70