Vxetable 递归多级表头

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

// 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>
// 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>

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值