基于Vue3和Element Plus實現一個可定制的動態(tài)表格列配置組件

更新時間：2025年07月09日 08:39:43 作者：P7Dreamer

在后臺管理系統(tǒng)中,表格是最常用的數據展示方式之一,不同的用戶或不同的場景下,我們往往需要展示不同的表格列,本文將介紹如何基于 Vue 3 和 Element Plus 實現一個可定制的動態(tài)表格列配置組件,需要的朋友可以參考下

引言

在后臺管理系統(tǒng)中，表格是最常用的數據展示方式之一。不同的用戶或不同的場景下，我們往往需要展示不同的表格列，或者對列的顯示方式有不同的需求。本文將介紹如何基于 Vue 3 和 Element Plus 實現一個可定制的動態(tài)表格列配置組件，讓用戶可以自由選擇需要顯示的列、調整列的順序、配置列的顯示方式等。

組件設計思路

我們的動態(tài)表格列配置組件主要由三部分組成：

CustomizeTableColumns - 負責單個表格列的渲染
ColumnConfigDialog - 提供列配置的交互界面
主頁面 - 整合組件并提供數據

這種設計遵循了單一職責原則，每個組件只關注自己的核心功能，使得代碼更加清晰、易于維護。

核心組件實現

1. CustomizeTableColumns 組件

<template>
  <el-table-column
    :prop="column.prop"
    :label="column.label"
    :align="column.align || 'center'"
    :width="column.width"
    :min-width="column.minWidth"
    :fixed="column.fixed"
    :sortable="column.sortable"
    :formatter="column.formatter ? dateFormatter : null"
    show-overflow-tooltip
  >
    <!-- 自定義列模板 針對特殊列通過插槽進行特殊處理 -->
    <template #default="scope" v-if="column.slot">
      <slot name="column-cell" :column="column" :row="scope.row" :index="scope.$index"></slot>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'

const props = defineProps({
  column: {
    type: Object,
    required: true
  }
})
</script>

功能說明：

封裝了 el-table-column 的基本配置
通過 slot 支持自定義列內容渲染
內置了日期格式化功能

使用示例：

<CustomizeTableColumns v-for="col in dynamicColumns" :key="col.prop" :column="col">
  <template #column-cell="{ column, row, index }">
    <!-- 自定義列內容 -->
    <template v-if="column.prop === 'index'">
      {{ index + (queryParams.pageNo - 1) * queryParams.pageSize + 1 }}
    </template>
    <template v-else-if="column.prop === 'typeName'">
      <span
        style="cursor: pointer; color: #409eff"
        v-if="row.id"
        @click="openForm('preview', row.customerName, row.customerId, row.id)"
      >
        {{ row.typeName }}
      </span>
    </template>
  </template>
</CustomizeTableColumns>

2. ColumnConfigDialog 組件

<template>
  <el-dialog
    v-model="showDialog"
    title="表格列配置"
    width="800px"
    append-to-body
    class="column-config-dialog"
  >
    <!-- 對話框內容 -->
  </el-dialog>
</template>

<script setup lang="ts">
import draggable from 'vuedraggable'

const props = defineProps({
  modelValue: Boolean,
  columns: Array,
  defaultColumns: Array
})

const emit = defineEmits(['update:modelValue', 'update:columns'])

// 控制對話框顯示
const showDialog = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 臨時列配置
const tempColumns = ref([])

// 全選控制
const checkAll = computed({
  get: () => tempColumns.value.every(col => col.visible),
  set: (val) => tempColumns.value.forEach(col => col.visible = val)
})

// 保存配置
const saveColumnConfig = () => {
  const newColumns = tempColumns.value.map((col, index) => ({
    ...col,
    order: col.fixed ? col.order : index
  }))
  emit('update:columns', newColumns)
  showDialog.value = false
}
</script>

功能特點：

列可見性控制：可以勾選顯示/隱藏列
拖拽排序：使用 vuedraggable 實現列順序調整
基礎配置：可以修改列名、對齊方式、寬度等
高級配置：支持固定列、最小寬度、排序等高級設置
全選/重置：一鍵全選或重置為默認配置

3. 主頁面集成

<template>
  <!-- 表格部分 -->
  <el-table :data="list">
    <CustomizeTableColumns v-for="col in dynamicColumns" :key="col.prop" :column="col">
      <!-- 自定義列模板 -->
    </CustomizeTableColumns>
  </el-table>
  
  <!-- 配置對話框 -->
  <ColumnConfigDialog
    v-model="showColumnConfig"
    :columns="columnOptions"
    :default-columns="defaultColumns"
    @update:columns="handleColumnsUpdate"
  />
</template>

<script setup lang="ts">
// 默認列配置
const defaultColumns = ref([])

// 當前列配置
const columnOptions = ref([
  {
    prop: 'index',
    label: '序號',
    width: 80,
    fixed: 'left',
    align: 'center',
    slot: true,
    visible: true,
    order: 0
  },
  { 
     prop: 'customerName', 
     label: '客戶名稱', 
     width: 150, 
     align: 'center', 
     visible: true, 
     order: 1 
  },
  {
    prop: 'typeName',
    label: '任務名稱',
    align: 'center',
    slot: true,
    visible: true,
    sortable: false,
    showAdvanced: true,
    minWidth: 80,
    order: 2
  },
  {
    prop: 'publishUserName',
    label: '發(fā)布人',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: true,
    order: 3
  },
  {
    prop: 'receiveUserName',
    label: '接收人',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 4
  },
  {
    prop: 'missionStatus',
    label: '狀態(tài)',
    width: 150,
    align: 'center',
    slot: true,
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 5
  },
  {
    prop: 'missionCancelReasonName',
    label: '作廢原因',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 6
  },
  {
    prop: 'missionRejectReasonName',
    label: '拒絕原因',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 7
  },
  {
    prop: 'missionRejectReasonDesc',
    label: '拒絕描述',
    width: 150,
    align: 'center',
    visible: true,
    sortable: false,
    showAdvanced: false,
    order: 8
  },
  {
    prop: 'publishTime',
    label: '發(fā)布時間',
    minWidth: 180,
    align: 'center',
    sortable: false,
    showAdvanced: false,
    formatter: true,
    visible: true,
    order: 9
  },
  { 
      prop: 'operation', 
      label: '操作', 
      visible: true, 
      minWidth: 140, 
      fixed: 'right', 
      slot: true 
  }
])

// 動態(tài)列（根據配置生成的可見列）
const dynamicColumns = computed(() => {
  return columnOptions.value
    .filter(col => col.visible)
    .sort((a, b) => a.order - b.order)
})

// 處理列更新
const handleColumnsUpdate = (newColumns) => {
  columnOptions.value = newColumns
}
</script>

關鍵技術點解析

1. 動態(tài)列渲染原理

動態(tài)列的核心是根據配置動態(tài)生成 el-table-column 組件：

const dynamicColumns = computed(() => {
  return columnOptions.value
    .filter(col => col.visible) // 過濾出可見的列
    .sort((a, b) => a.order - b.order) // 按順序排序
})

2. 列配置的數據結構

每個列配置包含以下屬性：

interface ColumnConfig {
  prop: string // 字段名
  label: string // 顯示名稱
  width?: number // 列寬
  minWidth?: number // 最小寬度
  align?: 'left' | 'center' | 'right' // 對齊方式
  fixed?: 'left' | 'right' // 固定位置
  sortable?: boolean // 是否可排序
  visible: boolean // 是否顯示
  order: number // 排序序號
  slot?: boolean // 是否使用插槽
  formatter?: boolean // 是否需要格式化
  showAdvanced?: boolean // 是否顯示高級設置
}