Report 报表组件

封装了常见的报表页面布局，包括顶部搜索栏、工具栏、中间表格区域以及底部区域。采用 CSS Flexbox 自动布局，无需手动计算高度。

基础用法

hide code

<template>
  <div style="height: 500px">
    <ctc-report :data="tableData" :column="columns" :total="total" :loading="loading" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      <template slot="search-bar-left">
        <el-input size="mini" v-model="query.name" placeholder="请输入名称" style="width: 100px"></el-input>
        <el-button size="mini" type="primary">查询</el-button>
      </template>
      <template slot="tool-bar-right">
        <el-button size="mini" type="primary">新增</el-button>
        <el-button size="mini">导出</el-button>
      </template>
    </ctc-report>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      total: 100,
      query: {
        name: ''
      },
      tableData: Array.from({ length: 10 }).map((_, idx) => ({
        id: idx + 1,
        name: '测试数据' + (idx + 1),
        date: '2023-01-01',
        address: '测试地址'
      })),
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '名称', prop: 'name' },
        { label: '日期', prop: 'date' },
        { label: '地址', prop: 'address' }
      ]
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log('current page:', val)
    },
    handleSizeChange(val) {
      console.log('page size:', val)
    }
  }
}
</script>

属性 (Props)

参数	说明	类型	默认值
margin	头部区域外间距	Array	[0]
padding	头部区域内间距	Array	[0]
containerMargin	内容区外间距	Array	[0]
containerPadding	内容区内间距	Array	[15]
height	表格高度 (可选，不设置则自动填充)	Number/String	null

间距属性详解

间距属性值为数组，格式同 CSS 的 margin/padding 简写：

• [10] → 四边均为 10px
• [10, 20] → 上下 10px，左右 20px
• [10, 20, 30] → 上 10px，左右 20px，下 30px
• [10, 20, 30, 40] → 上 10px，右 20px，下 30px，左 40px

┌───────────────────────────────────────────────────┐
│ report-wrap                                       │
│ ┌───────────────────────────────────────────────┐ │
│ │ ← margin →                                    │ │
│ │ ┌───────────────────────────────────────────┐ │ │
│ │ │ ← padding →  top-tool-column             │ │ │
│ │ │ (工具栏 + 搜索栏)                          │ │ │
│ │ └───────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────┘ │
│ ┌───────────────────────────────────────────────┐ │
│ │ ← containerMargin →                          │ │
│ │ ┌───────────────────────────────────────────┐ │ │
│ │ │ ← containerPadding →                     │ │ │
│ │ │   container (表格区域)                    │ │ │
│ │ └───────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────┘

使用示例：

<ctc-report
	:margin="[10, 20]"
	:padding="[0, 15]"
	:containerMargin="[10]"
	:containerPadding="[20, 30]"
/>

透传属性: 支持 ctc-table (及底层 el-table) 的所有属性，如 data, column, total, loading, pagination 等。

分页相关透传: 支持 el-pagination 的所有属性，如 layout, page-sizes, current-page, page-size 等。

<ctc-report
	:data="tableData"
	:column="columns"
	:total="100"
	:pagination="true"
	layout="total, sizes, prev, pager, next, jumper"
	:page-sizes="[10, 20, 50, 100]"
/>

插槽 (Slots)

顶部区域

插槽名	说明	备注
custom-tool-bar	完全自定义工具栏	使用后 tool-bar 相关插槽不生效
tool-bar	工具栏 (占满一行)	与 tool-bar-left/right 互斥
tool-bar-left	工具栏左侧
tool-bar-right	工具栏右侧
search-bar	搜索栏 (占满一行)	与 search-bar-left/right 互斥
search-bar-left	搜索栏左侧
search-bar-right	搜索栏右侧

表格区域

插槽名	说明	备注
container-top	表格容器顶部预留	未使用时不渲染
table-bar	表格工具栏	与 table-title/table-info-* 互斥
table-title	表格标题
table-info-left	表格信息区左侧
table-info-right	表格信息区右侧
default	表格上方自定义内容	在表格前渲染
table-empty	表格无数据时显示
append-table	表格底部预留	未使用时不渲染

布局结构

┌─────────────────────────────────────────────┐
│ tool-bar (或 tool-bar-left + right)          │
├─────────────────────────────────────────────┤
│ search-bar (或 search-bar-left + right)      │
├─────────────────────────────────────────────┤
│ container-top                               │
│ ┌─────────────────────────────────────────┐ │
│ │ table-bar / table-title / table-info    │ │
│ │ default (自定义内容)                     │ │
│ │ ┌─────────────────────────────────────┐ │ │
│ │ │ ctc-table (表格)                     │ │ │
│ │ └─────────────────────────────────────┘ │ │
│ │ append-table                           │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

自动布局原理

组件使用 CSS Flexbox 实现自动布局：

• 外层容器 display: flex; flex-direction: column
• 表格区域 flex: 1; min-height: 0 自动填充剩余空间
• 无需 JavaScript 计算高度，性能更优

v0.3.0 变更说明: 移除了 element-resize-detector 依赖和 minusHeight 属性，改用纯 CSS 方案。