PenTable 表格组件

代码示例

<template>
    <!-- 表格 -->
    <pen-table :data="list" :columns="columns"></pen-table>
</template>

<script setup lang="ts">
// 表格字段配置
const columns = defineTable([
    { prop: 'id', label: 'ID' },
    { prop: 'name', label: 'Name' },
    { prop: 'age', label: 'Age' },
    { prop: 'address', label: 'Address' },
])

// 字段列表，数据过滤可使用
const omitFields = ['action'];
const fields = getTableFields(columns, omitFields);

const { list, loading, pager, getList } = useList({
    request: () => axios.get('/api/list'),
    onSuccess: (data) => {
        // 处理数据
        // ...
        return data;
    },
});
</script>

插槽

插槽名	说明
expand	展开行插槽，当 columns 中有 type 为 expand 的字段时可用
[field]-header	表格头自定义，[field]为具体字段名，如：name-label
[field]	单元格数据自定义，[field]为具体字段名，如：name

<template>
    <pen-table v-model="search" :options="searchOptions">
        <template #name-header>
            <span>自定义表头</span>
        </template>
        <template #name>
            <span>自定义单元格内容</span>
        </template>
    </pen-table>
</template>

属性类型

import type { TableProps } from 'element-plus';

export interface Props<T> extends TableProps<T> {
    columns: TableColumnsProps<T>[]
}

TableColumnsProps定义

import type { TableColumnCtx } from 'element-plus';

// 列属性配置
type Props<T> = Omit<Partial<TableColumnCtx<T>>, 'prop' | 'label'>;

// 普通字段
export type DefaultColumnProps<T> = {
    prop: string;
    label: string;
    props?: Props<T>;
}

// 展开行
export type ExpandColumnsProps<T> = {
    type: 'expand';
    label: string;
    props?: Props<T>,
}

// 序号列
export type IndexColumnsProps<T> = {
    type: 'index';
    label: string;
    props?: Props<T>,
}

// 多选列
export type SelectionColumnsProps<T> = {
    type: 'selection';
    label: string;
    props?: Props<T>,
}

export type TableColumnsProps<T> = DefaultColumnProps<T> | ExpandColumnsProps<T> | IndexColumnsProps<T> | SelectionColumnsProps<T>;

Expose属性

属性名	说明
instance	表格实例