ImElTable 表格组件

基于 Element Plus el-table 组件深度封装的增强表格组件，提供丰富的功能和极佳的用户体验。

🎮 在线演示

想要查看表格组件的交互效果？请访问在线演示

组件特性

🚀 开箱即用 - 继承 el-table 所有属性，零学习成本
📊 智能分页 - 内置分页器，支持序号连续显示
⚙️ 自定义列 - 支持拖拽排序和显示隐藏
✅ 跨页选择 - 选择状态跨页保留
🛠️ 强大工具栏 - 可扩展的左右插槽设计
🎯 操作列 - 内置操作按钮，支持更多菜单

基本用法

最简单的表格使用方式：

vue

<template>
  <im-el-table
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :data="tableData"
    :columns="columns"
    :total="total"
    :loading="loading"
    @action-click="handleActionClick"
  />
</template>

<script setup>
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const loading = ref(false)

const tableData = ref([
  {
    id: 1,
    name: "张三",
    age: 25,
    department: "技术部",
    position: "前端工程师",
    status: "在职",
    // 操作按钮配置
    _actions: [
      { key: "view", title: "查看" },
      { key: "edit", title: "编辑" },
      { key: "delete", title: "删除" }
    ]
  }
])

const columns = [
  { prop: "name", label: "姓名", sortable: true },
  { prop: "age", label: "年龄", width: 80 },
  { prop: "department", label: "部门" },
  { prop: "position", label: "职位" },
  { prop: "status", label: "状态", slot: "status" },
  { prop: "actions", label: "操作", slot: "actions", fixed: "right" }
]

const handleActionClick = (action, row) => {
  console.log("操作点击:", action.key, row.name)
}
</script>

工具栏使用

支持左右插槽的强大工具栏：

vue

<template>
  <im-el-table
    :data="tableData"
    :columns="columns"
    :show-selection="true"
    @selection-change="handleSelectionChange"
  >
    <!-- 工具栏左侧插槽 -->
    <template #toolbar-left>
      <div class="flex items-center gap-2">
        <el-input 
          v-model="searchKeyword" 
          placeholder="搜索姓名、部门..." 
          clearable 
          style="width: 240px"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select 
          v-model="statusFilter" 
          placeholder="状态筛选" 
          clearable 
          style="width: 120px"
        >
          <el-option label="在职" value="在职" />
          <el-option label="离职" value="离职" />
        </el-select>

        <el-button 
          v-if="selectedRows.length > 0" 
          type="danger"
          @click="handleBatchDelete"
        >
          批量删除 ({{ selectedRows.length }})
        </el-button>
      </div>
    </template>

    <!-- 状态列自定义内容 -->
    <template #status="{ row }">
      <el-tag :type="getStatusTagType(row.status)" size="small">
        {{ row.status }}
      </el-tag>
    </template>
  </im-el-table>
</template>

API

Props

参数	说明	类型	可选值	默认值
data	表格数据	Array	—	[]
columns	列配置	Array	—	[]
loading	加载状态	Boolean	—	false
loading-text	加载文本	String	—	'正在加载...'
height	表格高度	String/Number	—	—
max-height	表格最大高度	String/Number	—	—
show-index	是否显示序号列	Boolean	—	true
show-selection	是否显示选择列	Boolean	—	false
show-pagination	是否显示分页	Boolean	—	true
current-page	当前页码	Number	—	1
page-size	每页显示条数	Number	—	10
total	总条数	Number	—	0
show-toolbar	是否显示工具栏	Boolean	—	true
show-column-customizer	是否显示自定义列按钮	Boolean	—	true
show-fullscreen	是否显示全屏按钮	Boolean	—	true
show-refresh	是否显示刷新按钮	Boolean	—	true

Events

事件名	说明	回调参数
page-change	页码改变时触发	currentPage
size-change	页大小改变时触发	pageSize
selection-change	选择项发生变化时触发	selection
sort-change	排序条件发生变化时触发	prop, order
refresh	点击刷新按钮时触发	—
action-click	操作按钮点击时触发	action, row

Slots

插槽名	说明	参数
toolbar-left	工具栏左侧内容	—
toolbar-right	工具栏右侧内容	—
prop	自定义列内容，prop为列的字段名	row, column, $index

列配置

javascript

const columns = [
  {
    prop: 'name',           // 字段名，必需
    label: '姓名',          // 列标题，必需
    width: 120,            // 列宽度
    sortable: true,        // 是否可排序
    fixed: 'left',         // 固定列位置：left/right
    slot: 'name',          // 插槽名称
    required: true,        // 是否必需列（不可隐藏）
    formatter: (row, column, cellValue) => {
      return `${cellValue}元`
    }
  }
]

操作列配置

操作列通过在数据项中添加 _actions 数组来配置：

javascript

const tableData = [
  {
    id: 1,
    name: "张三",
    _actions: [
      {
        key: "view",          // 操作标识
        title: "查看",        // 按钮文本
        buttonType: "success", // 按钮类型
        disabled: false,      // 是否禁用
      }
    ]
  }
]

注意：超过3个操作会自动收起到"更多"菜单。

高级功能

自定义列显示

点击工具栏的设置按钮
拖拽调整列顺序
勾选控制列显示隐藏

全屏模式

点击全屏按钮进入全屏模式
按 ESC 键退出全屏

序号连续显示

跨页序号自动连续计算：

第1页：1, 2, 3, ..., 10
第2页：11, 12, 13, ..., 20

跨页选择保留

开启 reserve-selection 后支持跨页选择保留

最佳实践

列配置建议：合理设置列宽，重要列设为必需列
操作按钮设计：最多3个直接显示，其余收起
数据加载模式：配合loading状态使用

注意事项

大数据量时建议使用分页
在小屏幕设备上工具栏会自动调整布局
组件会自动清理拖拽实例和事件监听器

ImElTable 表格组件 ​

组件特性 ​

基本用法 ​

工具栏使用 ​

API ​

Props ​

Events ​

Slots ​

列配置 ​

操作列配置 ​

高级功能 ​

自定义列显示 ​

全屏模式 ​

序号连续显示 ​

跨页选择保留 ​

最佳实践 ​

注意事项 ​