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 list = ref([
    { id: 1, name: 'Tom', age: 18, address: 'Beijing' },
    { id: 2, name: 'Jerry', age: 20, address: 'Shanghai' },
])
</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';
import type { CSSProperties } from 'vue';

// 列属性配置
type Props<T> = Omit<Partial<TableColumnCtx<T>>, 'prop' | 'label'> & {
    style?: string|CSSProperties;
};

// 普通字段
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	表格实例