首页 > 其他分享 >递归生成表格动态表头

递归生成表格动态表头

时间:2023-07-12 11:11:25浏览次数:44  
标签:617182749 递归 表格 表头 生成 动态

<render-column :columnList="headList"></render-column>

<el-table-column>
  <template v-for="(item, index) in columnList">
    <el-table-column v-if="item.child && item.child.length > 0" :key="index" :label="item.name>
      <render-column :columnList="item.child">
        <template v-for="(index1, name) in $scopedSlots" v-slot:[name]="data">
         <slot :name="name" v-bind="data"></slot>
        </template>
      </render-column>
    </el-table-column>
    <el-table-column v-else :prop="item.id :label="item.name :key="index">
      <template slot-scope="scope">
        <span v-if="$scopedSlots[item.id]">
         <slot :name="item.id" v-bind="svope"></slot>
        </span>
      </template>
    </el-table-column>
  </template>
</el-table-column>

参考:https://zhuanlan.zhihu.com/p/617182749

标签:617182749,递归,表格,表头,生成,动态
From: https://www.cnblogs.com/cc-wiki/p/17546999.html

相关文章

  • js递归树结构
    //递归重组tree数据concatTreeData(list,newData,keyId,isLayze){letisFlag=false;list.map((item,index)=>{if(item.id==keyId){if(item.children){item.c......
  • 表格分页多选默认回显实现
    element的表格可以使用row-key和reserve-selection来实现多选翻页回显,但是在使用过程中却出现了,翻页之后,翻页保存的数据丢失问题。复现前准备首先是使用el-table和el-pagination搭建好基本的页面,包括获取表格数据事件,翻页事件以及表格的selection-change、row-key、re......
  • 多选表格实现思路
    表格多选功能的实现参考官方文档即可,下面给出代码:手动添加一个el-table-column,设type属性为selection,使得表格出现复选框<el-table-columntype="selection"width="50"align="center"/>然后给el-table添加selection-change事件,该事件接收一个参数selections,表示当......
  • 单选表格实现思路
    element单选表格的实现,主要依靠elTable组件的select事件,假设存在如下表格:以上面的表格为例子,可以通过如下步骤实现单选表格。data我们需要一个状态tableData用于存放表格的数据,还需要一个状态selectedRow用于存放当前勾选的行是数据。两个状态的默认值如下:data(){ re......
  • mui用列表实现表格的增删改查
    我的需求是实现表格的增删改查,原需求是有两列的表,有三列的表,因为移动端的表格操作不方便,所以想采用以前常用的列表形式来实现。先看画面效果。 一,先用静态html代码,实现画面呈现的样式,采用列表嵌套表格的方法,表格可以约束列宽。<divclass="mui-table"><divclass="mui-......
  • 使用递归函数来实现输入正整数,将正整数分解鸡(质因)数
    介绍一下递归函数:当我们定义一个函数时,如果函数内部调用了自身,那么这个函数就称为递归函数。递归函数是一种解决问题的方法,它将大问题分解为相同或类似的小问题,并通过逐步解决这些小问题来解决整个问题。使用递归函数的核心思想是将一个问题拆解为更简单的子问题,并且解决子问题的方......
  • Camstar表格自定义写js,实现单元格合并。
     效果: ......
  • [数据分析与可视化] 基于plottable库绘制精美表格
    plottable是一个Python库,用于在matplotlib中绘制精美定制的图形表格。plottable的官方仓库地址为:plottable。本文主要参考其官方文档,plottable的官方文档地址为:plottable-doc。plottable安装命令如下:pipinstallplottable本文所有代码见:Python-Study-Notes#jupyternoteboo......
  • 明明是张表格脸,怎么也长出了图片?(Excel批量处理图片合集)
    图片来源为函数类:Excel批量插入图片制图片的下拉选项图片就是图片类:批量插入图片把图片用在了数据透视表里只要是单元格对象的图片,不问出处:当函数遇上图片......
  • 利用xlsx库导出页面表格为xlsx文件
    html<el-tableid="table"></el-table>jsimport*asXLSXfrom'xlsx'/** *导出表格为xlsx文件 *@param{string}id表格dom的id*/asyncfunctionexportTable(id,fileName){letwb=XLSX.utils.table_to_book(document.getEleme......