ElementPlus Kit

Appearance

QTable ​

快捷表格（QTable）融合了Element-Plus 的 Table 表格 ，Pagination 分页 组件开发，；分为 表头、表格，分页 三个区域；

用法示例 ​

基础用法 ​

插槽使用 ​

插槽分为三类：分别时表头、表格和分页插槽；

表头插槽 ​

表格插槽 ​

表格内容区域插槽，支持原始组件的 的empty和append 插槽；

除了原始组件拥有的的empty和append外，还支持了操作列插槽、数据列插槽、表头插槽。

  1. 操作列插槽：action，配置了action插槽，则出现操作列，如果需要配置操作列的其他属性，可在columns中添加prop:'action的对象，对象中可自由定义操作列；
  2. 数据列，表头 自定义渲染：用来配置自定义渲染内容的，主要是支持两种方式配置；
    • 方式1：columns 下的 配置label、render可以实现表头和单元格内容自定义渲染
ts
{
    prop: 'age',
    label:  ({ column, $index }) => {
        return h('a', { style: { color: 'green' } }, '年龄(20为分界)')
    },
    render: ({ row, column, $index }) => {
            return h('a', { style: { color: row.age > 20 ? 'green' : 'blue' } }, row.age)
    },
},
  • 方式2：组件内部使用 #列标识.header 配置表头 ，#列标识 配置单元格内容
vue
<template>
 <QTable :title="title" :data="tableData1" :columns="columns1" v-model:page="page">
   <!-- 配置 sex.header 插槽实现表头自定义渲染内容 -->
    <template #sex.header="{ row }">
        <el-tag size="small" type="warning">Sex</el-tag>
    </template>
   <!-- 配置 sex 插槽实现单元格内容自定义渲染 -->
    <template #sex="{ row }">
        <el-tag size="small" v-if="row.sex === 1">男</el-tag>
        <el-tag size="small" type="danger" v-if="row.sex === 2">女</el-tag>
    </template>
</QTable>
</template>

如下案例

分页插槽 ​

Loading效果 ​

树形数据 ​

支持树类型的数据的显示。 当 row 中包含 children 字段时，被视为树形数据。 渲染嵌套数据需要 prop 的 row-key

QTable API ​

QTable 属性 ​

以下是 QTable 新属性，Element-Plus 的 Table 表格 原始配置均支持

属性名说明类型默认值
title表格标题，居左string-
columns表格列对象object[]
data数据object[]
page分页对象，配置此属性，则开启尾部分页object-
loading加载动效booleanfalse

columns属性配置项 ​

columns属性配置继承了Table Column的属性配置项，同时在此基础上新增了如下属性

属性名说明类型默认值
render属性为prop对应的单元格区域自定义渲染FunctionFunction-
prop属性名string-
label表头名称，如果是callback ，可以自定义表头单元格内容Function 或 string-

QTable 事件 ​

以下为 QTable 新增事件，Element-Plus 的 Table 表格 默认事件均支持

事件名说明类型
page-change分页变化时触发,返回page对象和触发变化的类型Function

QTable 插槽 ​

插槽名说明
theader表格头部区域插槽，如果配置，则 属性title,插槽headerLeft和headerRight均失效
headerLeft头部左侧区域插槽
headerRight头部右侧区域插槽
action表格操作列自定义的内容，配置后则出现操作列，如需配置操作列属性，可在columns单配置prop为action的对象
tfooter表格尾部区域插槽，这里默认指分页位置
append插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。
empty当数据为空时自定义的内容
[prop]prop 列单元格自定义的内容
[prop].headerprop 列表头区域自定义的内容

QTable 方法 ​

Element-Plus 的 Table 表格 相关方法均支持

类型申明 ​

类型申明
ts

type TableColums = {
    label?: string | ((scope: HeaderProps) => any),
    prop?: string,
    children?: (TableColums & Partial<TableColumnCtx<any>>)[],
    render?: (scope: DefaultProps) => VNode | Numeric
} & Partial<TableColumnCtx<any>>