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
    评论
表头的层数比较多时,可以使用归的方式来生成多级表头。以下是一个示例代码: ```html <el-table :data="tableData" style="width: 100%"> <template v-for="(column, index) in columns"> <template v-if="!column.children"> <el-table-column :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column> </template> <template v-else> <el-table-column :key="column.prop" :label="column.label" :align="column.align"> <template slot="header"> <el-row> <el-table-column v-for="(subColumn, subIndex) in column.children" :key="subColumn.prop" :prop="subColumn.prop" :label="subColumn.label" :width="subColumn.width" :align="subColumn.align"></el-table-column> </el-row> </template> <template v-if="column.children"> <template v-for="(subColumn, subIndex) in column.children"> <el-table-column v-if="!subColumn.children" :key="subColumn.prop" :prop="subColumn.prop" :label="subColumn.label"></el-table-column> <el-table-column v-else :key="subColumn.prop" :label="subColumn.label"> <template slot="header"> <el-row> <el-table-column v-for="(subSubColumn, subSubIndex) in subColumn.children" :key="subSubColumn.prop" :prop="subSubColumn.prop" :label="subSubColumn.label" :width="subSubColumn.width" :align="subSubColumn.align"></el-table-column> </el-row> </template> </el-table-column> </template> </template> </el-table-column> </template> </template> </el-table> ``` 在上述代码中,`columns` 是一个数组,用于存储表头列的属性。如果一个表头列具有子列,则在该列对象中添加 `children` 属性,该属性的值也是一个数组,存储子列的属性。在渲染表头时,首先使用 `v-for` 循环遍历 `columns` 数组,判断当前列是否有子列,如果没有子列,则直接生成表头列;如果有子列,则使用归的方式生成多级表头。 在生成多级表头时,需要注意以下几点: - 在父级表头中,使用 `slot="header"` 来指定子级表头的渲染位置。 - 在子级表头中,使用 `v-if` 判断当前列是否有子级表头,如果没有子级表头,则直接生成表头列;如果有子级表头,则继续归生成多级表头。 通过以上方式,就可以归生成多级表头

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值