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>
相关推荐
li357410 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj11 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel11 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel11 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵12 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld12 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
叫我阿柒啊14 小时前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
东风西巷14 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军14 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js