记录Vue3+ts+ElementPlus 多层级表头动态表格创建

记录Vue3+ts+ElementPlus 多层级表头动态表格创建_第1张图片

     因为工作需要,需要一个如上图(不确定层级的)多层级表头的表格,搜索网上的方法,多为vue2+element-ui的方法,查到的vue3+Element-plus的方法仅为建立两层级表格,经借鉴大神方法并修改成功,供自己留存,大神略过。

一、创建动态表格组件 DynamicTable.vue

代码如下:




二,创建表格列的组件 MyTableColumn.vue

    代码如下,通过调用组件自身的方法,递归循环。




三、使用动态表格组件




至此,该功能完成,加载后端数据可实现多层级(理论上无限级)表头的动态创建。

本文参考了 https://www.cnblogs.com/caohuiyuan/p/15246265.html 的内容,特向原作者致谢。

你可能感兴趣的:(开发语言,vue,elementui,前端)