Table 表格

EasyTable 是基于 Element Plus Table 组件封装的增强版本，提供了更便捷的配置方式和丰富的功能。

在线演示

女

undefined 岁

Total 30

• 1
• 2
• 3

Go to

<template>
  <div class="table-demo">
    <easy-table
      ref="tableRef"
      :table-data="tableData"
      :columns="columns"
      :operates="operates"
      :total="total"
      v-model:page="page"
      v-model:limit="limit"
      :options="{
        border: true,
        stripe: true,
        highlightCurrentRow: true
      }"
      :auto-scroll="false"
      pagination-position="right"
      @handleSelectionChange="handleSelectionChange"
      @pagination="onPagination"
    >
      <!-- 自定义表头 -->
      <template #header-name="{ column }">
        <el-tag effect="dark" size="small">{{ column.label }}</el-tag>
      </template>

      <!-- 自定义内容 -->
      <template #default-name="{ row }">
        <span style="font-weight: bold; color: #67c23a">{{ row.name }}</span>
      </template>
    </easy-table>

    <div v-if="selectedRows.length" class="selection-info">
      <strong>已选择：</strong>{{ selectedRows.length }} 条数据
    </div>
  </div>
</template>

<script setup>
import { h, ref, computed } from "vue"
import { ElTag, ElMessage } from "element-plus"
import { EasyTable } from "easy-elplus"
import { Edit, Delete, View } from "@element-plus/icons-vue"

const selectedRows = ref([])

// 模拟数据
const tableData = ref([
  {
    date: "2024-01-15",
    name: "张三",
    gender: 1,
    age: 28,
    city: "北京",
    status: 1,
    price: 1299
  },
  {
    date: "2024-01-16",
    name: "李四",
    gender: 0,
    age: 32,
    city: "上海",
    status: 0,
    price: 999
  },
  {
    date: "2024-01-17",
    name: "王五",
    gender: 1,
    age: 25,
    city: "深圳",
    status: 1,
    price: 1599
  },
  {
    date: "2024-01-18",
    name: "赵六",
    gender: 0,
    age: 30,
    city: "杭州",
    status: 1,
    price: 899
  }
])

const page = ref(1)
const limit = ref(10)
const total = ref(30)

// 列配置
const columns = computed(() => [
  { type: "selection", width: 50 },
  { type: "index", label: "序号", width: 60, align: "center" },
  { prop: "date", label: "日期", width: 120 },
  { prop: "name", label: "姓名", width: 120, key: "name" },
  {
    prop: "gender",
    label: "性别",
    width: 80,
    render: ({ row }) =>
      h(ElTag, { type: row.gender ? "primary" : "danger", size: "small" }, () => (row.gender ? "男" : "女"))
  },
  {
    prop: "age",
    label: "年龄",
    width: 80,
    render: ({ row }) => `<b style="color: #409eff">${row.age} 岁</b>`
  },
  {
    prop: "status",
    label: "状态",
    width: 100,
    formatter: row => (row.status ? "<span style='color: green'>正常</span>" : "<span style='color: red'>禁用</span>")
  },
  { prop: "city", label: "城市", width: 100 },
  {
    prop: "price",
    label: "价格",
    formatter: row => `¥ ${row.price.toFixed(2)}`
  }
])

// 操作按钮配置
const operates = {
  width: 200,
  fixed: "right",
  list: [
    {
      label: "编辑",
      type: "primary",
      icon: Edit,
      method: (row, index) => {
        ElMessage.info(`编辑第 ${index + 1} 行: ${row.name}`)
      }
    },
    {
      label: "查看",
      type: "success",
      icon: View,
      show: row => row.status === 1,
      method: row => {
        ElMessage.success(`查看: ${row.name}`)
      }
    },
    {
      label: "删除",
      type: "danger",
      icon: Delete,
      confirm: true,
      method: row => {
        ElMessage.error(`删除: ${row.name}`)
      }
    }
  ]
}

// 事件处理
const handleSelectionChange = val => {
  selectedRows.value = val
}

const onPagination = ({ page: p, limit: l }) => {
  ElMessage.success(`分页变化: 第${p}页, 每页${l}条`)
}
</script>

<style scoped>
.selection-info {
  margin-top: 15px;
  padding: 10px;
  background: #f0f9ff;
  border: 1px solid #409eff;
  border-radius: 4px;
  color: #409eff;
  font-size: 14px;
}
</style>

API

Attributes

参数	说明	类型	默认值
table-data	表格数据	Array	[]
columns	列配置	Array	[]
operates	操作列配置	Object	—
total	总条数	Number	0
page / v-model:page	当前页码	Number	1
limit / v-model:limit	每页条数	Number	20
options	Element Plus Table 的配置项	Object	{ stripe: false, highlightCurrentRow: false, border: true }
pagination-position	分页位置	String	'right'
hidden	是否隐藏分页	Boolean	false
page-sizes	每页条数选项	Array	[10, 20, 30, 50]
pager-count	最大页码按钮数	Number	7
layout	分页布局	String	'total, sizes, prev, pager, next, jumper'
background	是否为分页按钮添加背景色	Boolean	true
auto-scroll	分页变化时是否自动回顶	Boolean	true

---

Column 配置

除下表所列参数外，还支持 ElTableColumn 的所有属性。

参数	说明	类型	默认值
prop	字段名	String	—
label	列标题	String	—
width	列宽度	Number / String	—
align	对齐方式 (left / center / right)	String	'left'
fixed	固定列 (left / right)	String / Boolean	—
type	列类型 (selection / index)	String	—
render	渲染函数 (支持 VNode / HTML 字符串)	Function / String	—
formatter	格式化函数 (支持 HTML 字符串)	Function	—
key	插槽标识 (默认使用 prop)	String	—
show	是否显示	Boolean / Function	true

---

Operates（操作列配置）

参数	说明	类型	默认值
width	操作列宽度	Number / String	—
fixed	是否固定	String	'right'
list	按钮列表	Array	[]

---

Button 配置

除下表所列参数外，还支持 ElButton 的所有属性。

参数	说明	类型	默认值
label	按钮文字	String	—
type	按钮类型	String	'primary'
size	按钮尺寸	String	'small'
icon	图标组件	Component	—
method	点击回调	Function	—
show	是否显示	Boolean / Function	true

---

Events

事件名	说明	回调参数
pagination	分页变化	{ page, limit }
handleSelectionChange	选择项变化	selection
sortChange	排序变化	{ column, prop, order }

---

Slots

插槽名	说明	参数
header-[key]	自定义表头	{ column }
default-[key]	自定义内容	{ row, column, $index }

---

Methods

方法名	说明	参数
iTableRef	获取 ElTable 实例	—

---

特性说明

1. 自动分页：内置分页组件，支持双向绑定。
2. 灵活渲染：支持 render、formatter、插槽多种方式。
3. 操作列简化：统一配置操作按钮，支持条件显示。
4. 完全兼容：完整保留 Element Plus Table 能力。