快捷導航

基于Element Plus的TableColumnGroup 組件使用詳解

更新時間：2025年10月31日 14:57:23 作者：好奇的候選人面向?qū)ο?

本文介紹了一款基于ElementPlus封裝的TableColumnGroup組件,專為處理復雜表格需求設(shè)計,該組件支持多級嵌套表頭、自定義渲染、條件渲染等功能,能滿足大多數(shù)復雜表格的展示需求,感興趣的朋友跟隨小編一起看看吧

在 Element Plus 的表格組件中（ElTable），你可以使用 TableColumnGroup 來創(chuàng)建一個列組，這個列組可以包含多個列（ElTableColumn）。這樣，你可以將一些列組織在一起，形成一個邏輯上的“組”，這在視覺上可以幫助用戶更好地理解數(shù)據(jù)結(jié)構(gòu)。

在前端開發(fā)中，表格是展示數(shù)據(jù)的常用組件，而復雜的業(yè)務(wù)場景往往需要用到多級表頭。本文將介紹一款基于 Element Plus 封裝的 TableColumnGroup 組件，該組件支持嵌套列組、自定義渲染、條件渲染等功能，能滿足大多數(shù)復雜表格的展示需求。

組件功能特點

支持多級嵌套列組，輕松實現(xiàn)復雜表頭結(jié)構(gòu)

提供靈活的單元格渲染方式：默認渲染、自定義組件渲染、條件渲染

支持表格列的固定、寬度設(shè)置、對齊方式配置

內(nèi)置數(shù)字格式化功能，支持千分制顯示和單位轉(zhuǎn)換

支持自定義樣式類名，方便進行樣式調(diào)整

組件參數(shù)說明

參數(shù)名	類型	默認值	說明
label	String	-	列組的標題
type	String	''	列的類型，同 Element Plus 的 el-table-column
className	String	-	列組的樣式類名
columns	Array	[]	普通列配置數(shù)組，當沒有嵌套列組時使用
nestedGroups	Array	[]	嵌套列組配置數(shù)組
groupFixed	String/Boolean	null	列組是否固定，同 Element Plus 的 fixed 屬性
groupWidth	String/Number	-	列組的寬度
groupProp	String	-	列組對應(yīng)的屬性名
treeProps	Object	null	樹形表格配置
rowKey	String	-	行數(shù)據(jù)的唯一標識

columns 數(shù)組元素配置

columns 數(shù)組中的每個元素可配置以下屬性：

屬性名	類型	說明
align	String	單元格內(nèi)容對齊方式，默認 'center'
label	String	列標題
prop	String	對應(yīng)行數(shù)據(jù)的屬性名
width	String/Number	列寬度
className	String	列的樣式類名，默認使用父組件的 className
fixed	String/Boolean	列是否固定
customRender	Component	自定義渲染組件
customRenderProps	Object	傳遞給自定義渲染組件的屬性
conditionalRender	Function	條件渲染函數(shù)，返回布爾值決定是否顯示內(nèi)容
unit	String	數(shù)據(jù)單位，用于格式化顯示

使用示例

1. 基礎(chǔ)使用（普通列）

<template>
  <el-table :data="tableData">
    <TableColumnGroup 
      :columns="[
        { label: '姓名', prop: 'name' },
        { label: '年齡', prop: 'age', unit: '歲' },
        { label: '郵箱', prop: 'email' }
      ]"
    />
  </el-table>
</template>

2. 嵌套列組

<template>
  <el-table :data="tableData">
    <TableColumnGroup label="基本信息">
      <TableColumnGroup 
        :columns="[
          { label: '姓名', prop: 'name' },
          { label: '年齡', prop: 'age', unit: '歲' }
        ]"
      />
    </TableColumnGroup>
    <TableColumnGroup label="聯(lián)系方式">
      <TableColumnGroup 
        :nestedGroups="[
          {
            label: '電話',
            columns: [
              { label: '手機', prop: 'phone' },
              { label: '座機', prop: 'landline' }
            ]
          },
          {
            label: '網(wǎng)絡(luò)',
            columns: [
              { label: '郵箱', prop: 'email' },
              { label: '網(wǎng)址', prop: 'website' }
            ]
          }
        ]"
      />
    </TableColumnGroup>
  </el-table>
</template>

3. 自定義渲染

<template>
  <el-table :data="tableData">
    <TableColumnGroup 
      :columns="[
        { label: '姓名', prop: 'name' },
        { 
          label: '狀態(tài)', 
          prop: 'status',
          customRender: StatusTag,
          customRenderProps: { colors: { active: 'green', inactive: 'gray' } }
        }
      ]"
    />
  </el-table>
</template>
<script setup>
import StatusTag from './StatusTag.vue'
</script>

4. 條件渲染

<template>
  <el-table :data="tableData">
    <TableColumnGroup 
      :columns="[
        { label: '姓名', prop: 'name' },
        { 
          label: '業(yè)績', 
          prop: 'performance',
          unit: '元',
          conditionalRender: (row) => row.performance > 0
        }
      ]"
    />
  </el-table>
</template>

完整代碼實例

<!-- TableColumnGroup.vue -->
<template>
  <el-table-column align="center" :label="label" :type="type" :class-name="className" :fixed="groupFixed"
    :width="groupWidth" :prop="groupProp">
    <!-- 支持嵌套列組 -->
    <template v-if="hasNestedGroups">
      <TableColumnGroup v-for="(nestedGroup, nestedIndex) in nestedGroups" :key="nestedIndex" v-bind="nestedGroup" />
    </template>
    <!-- 普通列 -->
    <template v-else>
      <el-table-column v-for="col in columns" :key="col.prop" :align="col.align || 'center'" :label="col.label"
        :prop="col.prop" :width="col.width" :class-name="col.className || className" :fixed="col.fixed">
        <template #default="scope">
          <span>
            <!-- 支持自定義渲染 -->
            <template v-if="col.customRender">
              <component :is="col.customRender" :row="scope.row" :value="scope.row[col.prop]"
                v-bind="col.customRenderProps" />
            </template>
            <template v-else-if="col.conditionalRender">
              <!-- 條件渲染 -->
              <span v-if="col.conditionalRender(scope.row)">
                {{ formatNumberWithUnit(scope.row[col.prop], col.unit) }}
              </span>
              <span v-else class="hidden-column">-</span>
            </template>
            <template v-else>
              <!-- 數(shù)字類型格式化：千分制+兩位小數(shù) -->
              {{ formatNumberWithUnit(scope.row[col.prop], col.unit) }}
            </template>
          </span>
        </template>
      </el-table-column>
    </template>
  </el-table-column>
</template>
<script setup>
import { computed } from 'vue'
import { formatNumberWithUnit } from '@/utils/validate'
const props = defineProps({
  label: String,
  type: {
    type: String,
    default: '',
  },
  className: String,
  // 普通列配置
  columns: {
    type: Array,
    default: () => [],
  },
  // 嵌套列組配置
  nestedGroups: {
    type: Array,
    default: () => [],
  },
  groupFixed: {
    type: [String, Boolean],
    default: null,
  },
  groupWidth: [String, Number],
  groupProp: String,
  // 樹形表格配置
  treeProps: {
    type: Object,
    default: null,
  },
  rowKey: String,
})
// 判斷是否有嵌套列組
const hasNestedGroups = computed(() => {
  return props.nestedGroups && props.nestedGroups.length > 0
})
</script>
<style lang="scss">
.el-table__row.level-1 {
  background-color: #ffffff !important;
}
.el-table__row.level-2 {
  background-color: #f8f3c3 !important;
}
.el-table__row.level-3 {
  background-color: #fcd787 !important;
}
.el-table__row:hover>td {
  background-color: #e9e9e9 !important;
}
.hidden-column {
  color: #ccc;
  font-style: italic;
}
</style>

模板使用

  <el-table v-loading="loading" :data="oaBusinessMetricList" border max-height="660" row-key="id"
        scrollbar-always-on :fit="true" resizable @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" fixed="left" />
        <!-- 使用 TableColumnGroup 組件渲染列組 -->
        <TableColumnGroup v-for="group in columnGroups" :key="group.key" v-bind="group" />
        <!-- 操作列 -->
        <el-table-column align="center" class-name="small-padding fixed-width blueInfoHeader" fixed="right" label="操作"
          width="120">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button v-hasPerm="['oa:oaBusinessMetric:edit']" icon="Edit" link type="primary"
                @click="handleUpdate(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

const {
  getColumns,
  getColumnGroups,
} = useOaBusinessMetric();
// 獲取列組配置并生成列組數(shù)據(jù)
const columnGroups = computed(() =>
  getColumnGroups.value.map(group => ({
    ...group,
    columns: getColumns(group.columnKey)
  }))
);

樣式說明

組件內(nèi)置了一些基礎(chǔ)樣式，可通過自定義類名進行覆蓋：

不同層級行的背景色：.el-table__row.level-1、.el-table__row.level-2、.el-table__row.level-3

行 hover 樣式：.el-table__row:hover>td

條件渲染隱藏時的樣式：.hidden-column（灰色斜體）

可根據(jù)實際需求在項目中自定義這些樣式類。

總結(jié)

TableColumnGroup 組件通過對 Element Plus 的 el-table-column 進行二次封裝，提供了更強大的列組管理功能，特別適合需要展示復雜表頭結(jié)構(gòu)的業(yè)務(wù)場景。組件設(shè)計靈活，支持多種渲染方式，能夠滿足不同的數(shù)據(jù)展示需求。

希望本文能幫助大家更好地理解和使用這個組件，如有任何問題或建議，歡迎在評論區(qū)留言討論。

到此這篇關(guān)于基于Element Plus的TableColumnGroup 組件使用詳解的文章就介紹到這了,更多相關(guān)Element Plus TableColumnGroup 組件使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: