QTable

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

基础用法

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

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

{
    prop: 'age',
    label: '年龄',
    render: ({ row, column, $index }) => { 
            return h('a', { style: { color: row.age > 20 ? 'green' : 'blue' } }, row.age)   
    },  
    // render-header 可以正常使用，但控制台会报警告，Element官网建议使用 scoped-slot 代替 render-header  
    'render-header': ({ column, $index }) => {  
        return h('a', { style: { color: 'green' } }, '年龄(20为分界)')  
    },  
},

{
    prop: 'age',
    label: '年龄',
    render: ({ row, column, $index }) => { 
            return h('a', { style: { color: row.age > 20 ? 'green' : 'blue' } }, row.age)   
    },  
    // render-header 可以正常使用，但控制台会报警告，Element官网建议使用 scoped-slot 代替 render-header  
    'render-header': ({ column, $index }) => {  
        return h('a', { style: { color: 'green' } }, '年龄(20为分界)')  
    },  
},

注意

render-header可以正常使用，但控制台会报警告，Element官网建议使用scoped-slot代替render-header

方式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>

<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>

QTable API

QTable 属性

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

属性名	说明	类型	默认值
title	表格标题，居左	`string`	-
columns	表格列对象	`object`	[]
data	数据	`object`	[]
page	分页对象，配置此属性，则开启尾部分页	`object`	-
page-config	分页组件其他选项配置	`object`	-

columns属性配置项

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

属性名	说明	类型	默认值
render	属性为`prop`对应的单元格区域自定义渲染Function	`Function`	-
prop	属性名	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 ISlots = {
  header?: ((...args: any[]) => VNode | string | void) | string;
  default?: ((...args: any[]) => VNode | string | void) | string;
}

type ItemCols = {
  label: string;
  prop: string;
  children?: Array<ItemCols>;
  // slot?: ISlots;
  render?: (...args: any[]) => VNode | number | string;
  // render?: ((...args: any[]) => VNode | string | void) | string;
} & Indexable

type IPageProps = {
  current: number;
  size: number;
  total: number;
}

type ISlots = {
  header?: ((...args: any[]) => VNode | string | void) | string;
  default?: ((...args: any[]) => VNode | string | void) | string;
}

type ItemCols = {
  label: string;
  prop: string;
  children?: Array<ItemCols>;
  // slot?: ISlots;
  render?: (...args: any[]) => VNode | number | string;
  // render?: ((...args: any[]) => VNode | string | void) | string;
} & Indexable

type IPageProps = {
  current: number;
  size: number;
  total: number;
}

QTable ​

基础用法 ​

QTable API ​

QTable 属性 ​

columns属性配置项 ​

QTable 事件 ​

QTable 插槽 ​

QTable 方法 ​

类型申明 ​