Table 表格

基于 Element Plus 的表格组件，提供更便捷的配置方式和丰富的功能，支持分页、多选、排序、操作列、标签页、导出等。

基本用法

<template>
  <g-table
    ref="tableRef"
    :current-page="currentPage"
    :page-size="pageSize"
    :source="tableData"
    :loading="loading"
    :total="total"
    :columns="columns"
    :show-index="true"
    :show-selection="true"
    :get-operations="getOperations"
    @page-change="handlePageChange"
    @size-change="handleSizeChange"
  >
    <template #actions>
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </template>
    <template #status="{ row }">
      <el-tag :type="row.status === 1 ? 'success' : 'danger'">
        {{ row.status === 1 ? '启用' : '禁用' }}
      </el-tag>
    </template>
  </g-table>
</template>

<script setup>
const tableData = ref([{ id: 1, name: '张三', age: 18, status: 1 }])
const columns = [
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age' },
  { label: '状态', prop: 'status', slot: 'status' },
]
const loading = ref(false)
const total = ref(100)
const currentPage = ref(1)
const pageSize = ref(10)
const handlePageChange = (page) => {
  currentPage.value = page
}
const handleSizeChange = (size, newPage) => {
  pageSize.value = size
  currentPage.value = newPage
}
const handleAdd = () => {}
</script>

属性说明

属性	说明	类型	默认值
source	表格数据源	array	[]
columns	表格列配置	array	[]
rowKey	行数据唯一标识	string/number	'id'
loading	加载状态	boolean	false
total	数据总数	number	0
currentPage	当前页码	number	1
pageSize	每页条数	number	10
pageSizes	每页条数选项	array	[10, 20, 30, 40]
showPagination	是否显示分页	boolean	true
paginationLayout	分页组件布局	string	'total, sizes, prev, pager, next, jumper'
showSelection	是否显示选择列	boolean	false
reserveSelection	是否保留选择项	boolean	true
showIndex	是否显示序号列	boolean	false
border	是否显示边框	boolean	false
stripe	是否斑马纹	boolean	false
maxHeight	表格最大高度	string/number	'auto'
getOperations	获取操作列按钮的方法	(row) => array	() => []
operationsLabel	操作列标题	string	'操作'
localPagination	是否本地分页	boolean	false
tabs	标签页配置	array	[]
activeTab	当前激活标签页	string/number	''
fixedPagination	滚动时固定底部分页	boolean	true
tableCustomStyle	表格自定义样式	object	{}
tableWrapperStyle	表格外层自定义样式	object	{}
height	表格高度	string/number	'auto'
selectable	行是否可选	function	() => true
exportConfig	导出配置	object	见下方说明
containerPadding	外层容器 padding	string/number	''
paginationStyle	分页器自定义样式	object	{}
accordion	是否启用手风琴模式	boolean	false

exportConfig 配置

属性	说明	类型	默认值
showExportButton	是否显示导出按钮	boolean	false
exportText	导出按钮文本	string	'导出'
fetchData	导出时获取数据方法	function	() => {}
columns	导出列配置	array	[]
fileName	导出文件名	string	export_时间戳
beforeExport	导出前钩子	function	() => {}
afterExport	导出后钩子	function	() => {}
formatData	格式化导出数据	function	(_) => _
getListData	获取导出数据列表	function	(_) => _.data
query	导出查询参数	object	{}
showExportColumnSetting	是否显示列设置按钮	boolean	false

列配置（columns）

属性	说明	类型
label	列标题	string
prop	列字段名	string
width	列宽度	string/number
minWidth	最小列宽	string/number
align	对齐方式	'left'/'center'/'right'
slot	自定义列插槽名	string
sortable	是否可排序	boolean
format	格式化函数	(row: object) => any
cellStyle	单元格样式	object / (row, column) => object
fixed	列是否固定	'left'/'right'/boolean
children	多级表头的子列配置	array
className	单元格自定义类名	string
props	额外传递给 el-table-column 的属性	object
spanWidth	额外自定义宽度	number

事件

事件名	说明	回调参数
selectionChange	选择项变化时触发	(selection: array)
pageChange	页码改变时触发	(page: number)
sizeChange	每页条数改变时触发	(size: number, newPage: number)
tabChange	标签页改变时触发	(tab: string/number)
sortChange	排序变化时触发	(sortInfo: object)

插槽

插槽名	说明	作用域参数
actions	表格顶部操作按钮区域	-
[prop]	列数据的自定义插槽，名称为列的 prop 值	{ row, column, $index }
empty	空数据自定义插槽	-

方法

方法名	说明	参数
clearSelection	清空表格选择项	-

组件实例属性

属性名	说明	类型
tableRef	El-Table 组件实例引用	TableInstance
selectedRows	当前选中的行数据	array

注意事项:

表格中使用cell-image-preview时, 定义slot后, 需要给一个className: 'cell-image'; 宽度一般是100, 如果表头的文案>4, 就需要自定义宽度了

样式定制

组件提供了丰富的自定义样式，详见源码 style 部分。

---

如需更详细的用法和进阶示例，请参考源码和实际业务场景。