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>
相关推荐
Rika3 分钟前
手写mini-vue之后,我写了一份面试通关手册
前端·vue.js
我想说一句4 分钟前
使用React开发拉布布旅游智能聊天机器人的实践
前端·前端框架
wwy_frontend4 分钟前
积累:04-VUE2
前端
拾光拾趣录4 分钟前
箭头函数 vs 普通函数:从“this 指向混乱”到写出真正健壮的代码
前端·javascript
一只毛驴6 分钟前
浏览器中的事件冒泡,事件捕获,事件委托
前端·面试
lixin10 分钟前
使用 MCP 协议扩展 Cursor 功能:原理解析与实战指南
前端
a cool fish(无名)20 分钟前
rust-模块树中引用项的路径
java·前端·rust
前端进阶者30 分钟前
天地图Marker跳一跳动画
前端
火柴就是我33 分钟前
每日见闻之Three.js 根据官方demo 理解相机位置
前端
JosieBook43 分钟前
【web应用】基于Vue3和Spring Boot的课程管理前后端数据交互过程
前端·spring boot·交互