Vxetable 递归多级表头

在对vxetable 进行二次封装的时候,多级表头也是需要考虑进去的,所以需要封装一个递归列组件进行多级表头的一个渲染。

html 复制代码
// my-table.vue
<vxe-table
      ref="xTable"
      :key="currentKey"
      :data="pageData?.list || []"
      show-header-overflow="tooltip"
      show-overflow="tooltip"
      border="inner"
      :row-style="rowStyle"
      @current-change="onCurrentChange"
    >
      <!-- 普通列 -->
      <template v-for="(tOptions) of tableNormalOptions" :key="tOptions.prop">
        <!-- 单表头 -->
        <vxe-column
          v-if="!tOptions.child || tOptions.child?.length===0"
          :title="tOptions.showName"
          :field="tOptions.uniqueKey"
          :width="tOptions.width ? tOptions.width : ''"
          :min-width="tOptions.minWidth ? tOptions.minWidth : '100'"
          :header-align="tOptions.headerAlign ? tOptions.headerAlign : 'center'"
          :align="tOptions.align ? tOptions.align : 'center'"
          :fixed="tOptions.fixed ? tOptions.fixed : ''"
          :sortable="tOptions.sortable ? true : false"
          :sort-by="tOptions.sortable ? tOptions.sortBy : ''"
          :resizable="tOptions.resizable !== null ? tOptions.resizable : true"
          :visible="tOptions.visible !== null ? tOptions.visible : false"
          :filters="tOptions.filters"
        >
          <!-- 自定义列内容格式 -->
          <template v-if="tOptions.slot" #default="scope">
            <t-button
              class="hyperlink-button"
              :text="`${isNoVal(scope.row[tOptions.uniqueKey])}`"
              type="text"
              @click="openNewWindow(tOptions.uniqueKey)"
            ></t-button>
          </template>
          <!-- 默认展示格式(此处做了判空处理, 如果为空, 则展示小短横线) -->
          <template v-else #default="scope">
            {{ `${isNoVal(scope.row[tOptions.uniqueKey])}` }}
          </template>
        </vxe-column>

        <!-- 多表头 -->
        <cross-table-vxe-colgroup
          v-else
          :data="tOptions"
          :all-sheet-resources="allSheetResources"
        ></cross-table-vxe-colgroup>
      </template>
    </vxe-table>
javascript 复制代码
// cross-table-vxe-colgroup.vue
<template>
  <vxe-colgroup
    :title="data.name"
    :header-align="data?.headAlign||'center'"
  >
    <template
      v-for="item in data.child"
      :key="item.prop"
    >
      <vxe-column
        v-if="!item.child || item.child?.length ===0"
        :title="item.name"
        :field="item.uniqueKey"
        :width="item.width ? item.width : ''"
        :min-width="item.minWidth ? item.minWidth : '100'"
        :header-align="item.headerAlign ? item.headerAlign : 'center'"
        :align="item.align ? item.align : 'center'"
        :fixed="item.fixed ? item.fixed : ''"
        :sortable="item.sortable ? true : false"
        :sort-by="item.sortable ? item.sortBy : ''"
        :resizable="item.resizable ? item.resizable : false"
        :visible="item.visible !== null ? item.visible : false"
        :filters="item.filters"
      >
        <!-- 默认展示格式(此处做了判空处理, 如果为空, 则展示小短横线) -->
        <template  #default="scope">
          {{ scope.row[item.uniqueKey]}
        </template>
      </vxe-column>
      <cross-table-vxe-colgroup v-else :data="item"></cross-table-vxe-colgroup>
    </template>
  </vxe-colgroup>
</template>
相关推荐
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊4 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林4 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库6 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪7 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程7 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常7 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程