element-ui的表格。表头和表格数据都是接口动态给的。多级表头。如何写呢？

ゝ一世哀愁。 2023-02-16 11:00 55阅读 0赞

element-ui多级表头官网是这样写的[https://element.eleme.cn/\#/zh-CN/component/table][https_element.eleme.cn_zh-CN_component_table]

我们看到这是已知一级和二级表头是那几个字段然后拼起来的。如果表头信息是接口动态给的，根据传参每次都是不一样的。这样官网的这个例子根据没办法实现。

![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][]

上面是接口传来的数据。titledata是表头的数据。children如果长度大于0.children就是他的2级表头。tablebase是表格内容。表头的value值对应表格数据的键值。

如果tablebase作为表格一级表头的表格。键是表头，那么我们即使不知道长度也可以通过循环来写的。参考这篇文章[https://blog.csdn.net/qq\_33769914/article/details/106547680。][https_blog.csdn.net_qq_33769914_article_details_106547680]

但是此时我们都是动态的还是关联的怎么办呢。开始我用的原生的tr来写表头。在用上面链接方法写表格内容。但是这相当于是两个部分。因为不能修改tr的宽度，所以导致根本对不整齐。下面内容过长出现滚动条，上面的表头却是挤着硬在一行内撑的换行。

然后我发现了我们可以用组件。把el-table和el-table-column分开来写

父页面table.vue

> <template>  
>   <div>  
>     <my-table :titledata="titledata"  
>       :tabledata="tabledata">  
>     </my-table>  
>   </div>  
> </template>
> 
> <script>  
> import MyTable from './MyTable'  
> export default \{  
>   components: \{  
>     MyTable  
>   \},  
>   data() \{  
>     return \{  
>       titledata: \[//表头信息  
>         \{  
>           values: 'date',  
>           label: '日期'  
>         \},  
>         \{  
>           values: '配送信息',  
>           children: \[  
>             \{  
>               values: 'name',  
>               label: '姓名'  
>             \},  
>             \{  
>               values: '地址',  
>               children: \[  
>                 \{  
>                   values: 'province',  
>                   label: '省份'  
>                 \},  
>                 \{  
>                   values: 'city',  
>                   label: '市区'  
>                 \},  
>                 \{  
>                   values: 'address',  
>                   label: '地址'  
>                 \}  
>               \]  
>             \}  
>           \]  
>         \}  
>       \],  
>       tabledata: \[//表格内容  
>         \{  
>           date: '2016-05-03',  
>           name: '王小虎',  
>           province: '上海',  
>           city: '普陀区',  
>           address: '上海市普陀区金沙江路 1518 弄',  
>           zip: 200333  
>         \},  
>         \{  
>           date: '2016-05-02',  
>           name: '王小虎',  
>           province: '上海',  
>           city: '普陀区',  
>           address: '上海市普陀区金沙江路 1518 弄',  
>           zip: 200333  
>         \}  
>       \]  
>     \}  
>   \}  
> \}  
> </script>  
> <style>  
> </style>

可以看到上面的页面使用了组件MyTable。下面我们来写MyTable.vue

> <template>  
>   <div class="my-table">  
>     <el-table :data="tabledata">  
>       <my-column v-for="(item,index) in titledata" :key="index" :titledata="item"></my-column>  
>     </el-table>  
>   </div>  
> </template>
> 
> <script>  
> import MyColumn from './MyColumn'  
> export default \{  
>   components: \{  
>     MyColumn  
>   \},  
>   props: \{  
>     titledata: \{  
>       type: Array  
>     \},  
>     tabledata: \{  
>       type: Array  
>     \}  
>   \}  
> \}  
> </script>  
> <style scoped>  
> </style>

上面的组件呢又用到了MyColumn这个子组件。

MyColumn.vue

<el-table-column :prop="titledata.values"  
    :label="titledata.label"  
    align="left">

</el-table-column>  
</template>

[https_element.eleme.cn_zh-CN_component_table]: https://element.eleme.cn/#/zh-CN/component/table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020060917230326.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/20200609173726388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qq_33769914_article_details_106547680]: https://blog.csdn.net/qq_33769914/article/details/106547680