QTable

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

用法示例

基础用法

插槽使用

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

表头插槽

表格插槽

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

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

1. 操作列插槽：action，配置了action插槽，则出现操作列，如果需要配置操作列的其他属性，可在columns中添加prop:'action的对象，对象中可自由定义操作列；
2. 数据列，表头 自定义渲染：用来配置自定义渲染内容的，主要是支持两种方式配置；
   • 方式1：columns 下的 配置label、render可以实现表头和单元格内容自定义渲染

{
    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 配置表头 ，#列标识 配置单元格内容

<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	加载动效	boolean	false
classNames	表格不同区域类名	object

columns属性配置项

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

属性名	说明	类型	默认值
render	属性为prop对应的单元格区域自定义渲染Function	Function	-
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].header	prop 列表头区域自定义的内容

QTable 方法

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

类型申明

类型申明

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

type TableClassNames ={
    theader?:string,
    tfooter?:string,
}