@jt-home/mfe-components

组件总览

@jt-home/mfe-components 是基于 Vue 3 和 Element Plus 的业务组件库，主要沉淀通用表单、筛选、表格、分页、CRUD 页面骨架，以及全球信息模板相关的数据渲染组件。业务系统可按需从 npm 包中引入组件和类型。

| 组件 / 模块 | 大概功能 | 文档 | | --- | --- | --- | | JtButton | 基于 Element Plus ElButton 的通用按钮，统一按钮样式，支持图标 prop 和图标插槽。 | 查看文档 | | JtPageHeader | 页面或业务区块标题栏，支持右侧操作按钮配置和操作事件。 | 查看文档 | | JtFormItems | 配置化表单项渲染器，负责渲染表单项，不内置表单提交逻辑。 | 查看文档 | | JtFilterBar | 查询筛选区组件，组合表单项、查询、重置和展开收起能力。 | 查看文档 | | JtTable | 配置化表格组件，支持列配置、统一列属性、插槽扩展、默认表格视觉和常用表格能力。 | 查看文档 | | JtPagination | 表格分页组件，统一分页展示、分页事件和默认分页视觉。 | 查看文档 | | JtTableLayout | 查询区、工具栏、表格区的标准页面布局容器。 | 查看文档 | | JtCrud | 面向常规列表页的 CRUD 组合组件，整合查询、表格、分页和头部操作。 | 查看文档 | | JtCrudTable / table | 面向表格 CRUD 场景的增强模块，支持筛选列、字典映射、远程筛选、分页和插槽扩展。 | 查看文档 | | GlobalInfoProvider / globalInfo | 面向“全球信息模板”的数据容器、自动渲染器和业务扩展出口。 | 查看文档 |

组件库说明文档。

说明：业务使用时通过 npm 包引入，例如 import { JtButton } from '@jt-home/mfe-components'。

npm 发布

组件库使用 npm 库构建，并通过 Changesets 管理版本号和发布说明。每次涉及对外行为、组件 API、样式或构建产物的改动，发布前先生成变更记录：

pnpm changeset

发布时执行统一脚本：

pnpm release

发布前如需预检查产物内容，可先执行：

npm pack --dry-run

• pnpm changeset 用于选择本次发布的版本级别，并在 .changeset/ 下生成待发布变更说明。
• pnpm release 会先执行 changeset status 检查是否已有变更记录，再自动执行 changeset version 更新 package.json 版本号并生成 / 更新 CHANGELOG.md，随后构建并发布 npm 包。
• pnpm build 会先执行 build:bundle 生成 dist/index.mjs、dist/index.cjs 和 dist/style.css，再执行 build:types 生成 dist/types/main.d.ts 及组件类型声明。
• npm pack --dry-run 用于发布前检查实际会进入 npm 包的文件。
• vue 和 element-plus 是 peerDependencies，使用方项目需要自行安装。
• 如果使用公司私有 npm 仓库，需要先确认 .npmrc 的 registry 和登录 token。

样式按需引入

组件库构建时会通过 Vite/Rollup external 排除 vue 和 element-plus 的 JS 代码，避免把它们打进组件库包里；但会放行 Element Plus 的样式路径，让组件使用到的 Element Plus CSS 可以跟随组件库入口自动加载：

rollupOptions: {
  external: isExternalDependency,
}

这表示使用方项目仍需要安装并提供 vue 和 element-plus：

pnpm add vue element-plus @jt-home/mfe-components

业务项目正常只需要引入组件：

import { JtButton } from '@jt-home/mfe-components';

构建产物的 dist/index.mjs / dist/index.cjs 会自动引用：

import './style.css';

同时会按组件实际使用情况引用 Element Plus 样式，例如：

import 'element-plus/theme-chalk/el-button.css';
import 'element-plus/theme-chalk/el-input.css';

因此使用方不需要再手动写：

import 'element-plus/dist/index.css';
import '@jt-home/mfe-components/style.css';

安装与使用

import {
  JtButton,
  JtPageHeader,
  JtFormItems,
  JtFilterBar,
  JtTable,
  JtPagination,
  JtTableLayout,
  JtCrud,
} from '@jt-home/mfe-components';

import type {
  JTFormItemConfig,
  JtFilterBarProps,
  JtTableColumn,
  JtTableProps,
  JtPageHeaderProps,
  JtTableLayoutProps,
  JtCrudSearchProps,
  JtCrudTableProps,
} from '@jt-home/mfe-components';

JtButton

JtButton 基于 Element Plus ElButton 封装，props 使用 Element Plus ButtonProps 类型约束，并统一项目按钮基础高度、圆角、字号、默认态和 primary 态样式。除自定义 icon 外，其余按钮属性会透传给 ElButton。

<template>
  <JtButton type="primary" :icon="Plus" @click="handleAdd">
    新增
  </JtButton>

  <JtButton style="--jt-button-icon-size: 16px">
    <template #icon>
      <img src="@/assets/search.png" alt="" />
    </template>
    查询
  </JtButton>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import { JtButton } from '@jt-home/mfe-components';

function handleAdd() {
  console.log('新增');
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | icon | 按钮图标组件；未传 #icon 插槽时生效 | Component | - | | type / size / plain / loading / disabled / nativeType | Element Plus ElButton 属性，按 ButtonProps 类型约束 | ButtonProps 对应字段 | - |

Slots

| 名称 | 说明 | | --- | --- | | default | 按钮内容 | | #icon | 自定义图标内容，优先级高于 icon prop；可传 SVG、图标组件或图片 |

CSS Variables

| 变量 | 说明 | 默认值 | | --- | --- | --- | | --jt-button-icon-size | 图标尺寸，内置 svg 和 img 都会使用该尺寸 | 14px | | --jt-button-icon-gap | 图标和按钮文本间距 | 6px | | --jt-button-height | 默认按钮高度；size="large" 为 36px，size="small" 为 28px | 32px | | --jt-button-padding-x | 按钮左右内边距 | 16px | | --jt-button-radius | 按钮圆角 | $radius-sm | | --jt-button-font-size | 默认按钮字号 | 14px | | --jt-button-primary-color | primary 按钮背景色 | #E60000 |

JtPageHeader

JtPageHeader 是页面区块标题组件，左侧展示标题，右侧展示操作按钮。适合查询区标题、表格标题和业务区块头部。

<template>
  <JtPageHeader
    title="客户列表"
    type="section"
    style="--jt-page-header-bg-color: #ffffff; --jt-page-header-title-font-size: 16px; --jt-page-header-border-radius: 8px;"
    :operates="operates"
    @operate-click="handleOperateClick"
  />
</template>

<script setup lang="ts">
import { JtPageHeader } from '@jt-home/mfe-components';
import type { JtPageHeaderOperate } from '@jt-home/mfe-components';

const operates: JtPageHeaderOperate[] = [
  { key: 'add', label: '新增', type: 'primary', onClick: handleAdd },
  { key: 'export', label: '导出' },
];

function handleAdd() {
  console.log('新增客户');
}

function handleOperateClick(operate: JtPageHeaderOperate) {
  console.log(operate.key);
}
</script>

onClick 适合给单个按钮绑定业务动作；operate-click 会在按钮点击后统一触发，适合做埋点、日志或兜底处理。

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | type | 标题层级，section 保持当前默认区块标题样式，subsection 用于小区块标题（白底、32px 高、无左右内边距、14px 标题、3px x 10px 标题标识） | 'section' \| 'subsection' | 'section' | | title | 左侧标题文案，也可用 #title 自定义 | string | - | | operates | 右侧操作按钮配置，也可用 #operates 自定义 | JtPageHeaderOperate[] | [] |

CSS Variables

| 变量 | 说明 | 默认值 | | --- | --- | --- | | --jt-page-header-bg-color | 头部背景色 | $color-bg-page，subsection 为 #fff | | --jt-page-header-height | 头部高度 | 44px，subsection 为 32px | | --jt-page-header-padding-x | 头部左右内边距 | $spacing-5，subsection 为 0 | | --jt-page-header-border-radius | 头部圆角 | $radius-md | | --jt-page-header-title-font-size | 左侧标题字号 | $font-size-title，subsection 为 14px | | --jt-page-header-title-marker-width | 左侧标题标识宽度 | 4px，subsection 为 3px | | --jt-page-header-title-marker-height | 左侧标题标识高度 | 12px，subsection 为 10px | | --jt-page-header-operates-gap | 右侧操作按钮间距 | 10px |

JtPageHeaderOperate

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | key | 操作唯一标识，不传时使用 label | string \| number | - | | label | 按钮文案 | string | - | | type | Element Plus 按钮类型 | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | - | | icon | 按钮图标组件 | Component | - | | disabled / loading / plain / text / link | 透传给按钮的常用状态 | boolean | - | | buttonProps | 透传给 ElButton 的额外属性 | Record<string, any> | - | | onClick | 当前按钮点击回调 | (operate, event) => void | - |

Events / Slots

| 名称 | 说明 | | --- | --- | | operate-click | 点击内置操作按钮时触发，参数为 operate、event | | #title | 自定义左侧标题 | | #operates | 自定义右侧操作区，作用域参数为 { operates } |

JtFormItems

JtFormItems 是基于 Element Plus ElFormItem 的配置化表单项渲染组件。它只负责渲染表单项，不包裹 ElForm，表单校验和提交逻辑由外层业务负责。

<template>
  <ElForm ref="formRef" :model="form" label-width="90px">
    <JtFormItems :form-data="form" :configs="configs" :span="2" />
  </ElForm>
  <ElButton type="primary" @click="handleSubmit">提交</ElButton>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import type { FormInstance } from 'element-plus';
import { JtFormItems } from '@jt-home/mfe-components';
import type { JTFormItemConfig } from '@jt-home/mfe-components';

const formRef = ref<FormInstance>();
const form = reactive({
  customerName: '',
  status: '',
  createDate: '',
});

const configs: JTFormItemConfig[] = [
  {
    prop: 'customerName',
    label: '客户名称',
    itemType: 'input',
    placeholder: '请输入客户名称',
    clearable: true,
    rules: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
    onChange: (value) => console.log(value),
  },
  {
    prop: 'status',
    label: '客户状态',
    itemType: 'select',
    clearable: true,
    rules: [{ required: true, message: '请选择客户状态', trigger: 'change' }],
    options: [
      { label: '启用', value: 'enabled' },
      { label: '停用', value: 'disabled' },
    ],
  },
  {
    prop: 'createDate',
    label: '创建日期',
    itemType: 'date-picker',
    type: 'date',
    valueFormat: 'YYYY-MM-DD',
  },
];

async function handleSubmit() {
  await formRef.value?.validate();
  console.log(form);
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | formData | 表单数据对象，字段由 config.prop 读取和更新 | Record<string, any> | - | | configs | 表单项配置列表 | JTFormItemConfig[] | [] | | span | 全局表单项栅格份数，优先级高于 config.span | number | - |

JTFormItemConfig

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | prop | 表单字段名，对应 formData[prop] | string | - | | label | 表单项标签 | string | - | | itemType | 控件类型，支持预置字符串或自定义组件 | 'input' \| 'select' \| 'date-picker' \| 'date-range' \| Component | | span | 当前表单项占用栅格份数，范围为 1-4 | number | 1 | | show | 是否显示当前表单项，false 时不渲染 | boolean | true | | options | select 选项，按 Element Plus ElOption 属性透传 | JTFormItemOption[] | [] | | rules | 当前表单项校验规则，快捷传递给 ElFormItem | FormItemProps['rules'] | - | | formItemProps | 透传给 ElFormItem 的额外属性 | Record<string, any> | - | | showSlot | 是否使用插槽渲染，插槽名为 prop 值 | boolean | false | | onXxx / onUpdate:xxx / on-xxx | 事件处理函数，例如 onChange、onFocus、onUpdate:modelValue | (...args: any[]) => void | - |

CSS Variables

| 变量 | 说明 | 默认值 | | --- | --- | --- | | --jt-form-gap | 表单项默认横向和纵向间距 | 10px | | --jt-form-control-height | 内置输入、选择、级联、日期控件高度 | 36px | | --jt-form-label-line-height | 表单标签行高 | 20px | | --jt-form-label-gap | 顶部标签和控件间距 | 6px | | --jt-form-label-color | 表单标签文字颜色 | #333333 | | --jt-form-required-color | 必填星号颜色 | #E60000 |

说明

• span 使用 4 等分栅格：1 表示一行 4 项，2 表示一行 2 项，4 表示一行 1 项。
• rules 会传给 ElFormItem；如果同时配置 formItemProps.rules，以 formItemProps.rules 为准。
• 符合 onXxx、onUpdate:xxx 或 on-xxx 形式的函数字段会转换为事件监听；onclick 这类 on 后接小写字母的字段不会被识别为事件。
• 内置 input、select、cascader、date-picker 仅做 Element Plus 控件转接，除内部字段和事件字段外，其它配置会通过 v-bind 透传给对应 Element Plus 控件。
• 内置控件会补默认值：input 默认 placeholder="请输入"，select 默认 placeholder="请选择"，date-picker 默认 type="date"、placeholder="请选择日期"、valueFormat="YYYY-MM-DD"；三者默认 clearable=true，显式传入对应属性可覆盖。

JtFilterBar

JtFilterBar 是查询区组件，内部组合 ElForm、JtFormItems 和查询 / 重置按钮。查询条件超过一行时会出现展开 / 收起按钮，点击查询会先执行内部表单校验，校验通过后触发 search。

<template>
  <JtFilterBar
    :model="queryForm"
    :configs="configs"
    :span="2"
    @search="handleSearch"
    @reset="handleReset"
  />
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { JtFilterBar } from '@jt-home/mfe-components';
import type { JTFormItemConfig } from '@jt-home/mfe-components';

const queryForm = reactive({
  customerName: '',
  status: '',
});

const configs: JTFormItemConfig[] = [
  {
    prop: 'customerName',
    label: '客户名称',
    itemType: 'input',
    clearable: true,
    rules: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
  },
  {
    prop: 'status',
    label: '客户状态',
    itemType: 'select',
    clearable: true,
    options: [
      { label: '启用', value: 'enabled' },
      { label: '停用', value: 'disabled' },
    ],
  },
];

function handleSearch() {
  console.log(queryForm);
}

function handleReset() {
  queryForm.customerName = '';
  queryForm.status = '';
}
</script>

Props / Events

| 名称 | 说明 | 类型 | | --- | --- | --- | | model | 查询表单数据 | Record<string, any> | | configs | 查询项配置，直接透传给 JtFormItems | JTFormItemConfig[] | | span | 查询项默认栅格份数 | number | | search | 点击查询按钮且表单校验通过后触发 | () => void | | reset | 点击重置按钮触发，并清理表单校验状态 | () => void |

JtTable

JtTable 是基于 Element Plus ElTable 的业务表格封装，支持配置化列、列插槽、工具栏插槽、空状态插槽和内置分页。默认表头背景为 #F9F9F9，表头 / 单元格高度为 40px，表格圆角为 6px，偶数行使用 #F9F9F9 斑马纹；table 模块中的 CRUD 操作列默认右固定，menuFixed: false 可关闭固定。

<template>
  <JtTable
    v-model:current-page="page.currentPage"
    v-model:page-size="page.pageSize"
    :columns="columns"
    :column-props="{ align: 'left', headerAlign: 'left', showOverflowTooltip: true }"
    :data="tableData"
    :total="total"
    @page-change="handlePageChange"
  >
    <template #status="{ row }">
      <ElTag :type="row.status === 'enabled' ? 'success' : 'info'">
        {{ row.status === 'enabled' ? '启用' : '停用' }}
      </ElTag>
    </template>
  </JtTable>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElTag } from 'element-plus';
import { JtTable } from '@jt-home/mfe-components';
import type { JtTableColumn } from '@jt-home/mfe-components';

const page = reactive({ currentPage: 1, pageSize: 20 });
const total = ref(2);
const tableData = ref([
  { id: 1, customerName: '上海测试客户', status: 'enabled' },
  { id: 2, customerName: '北京测试客户', status: 'disabled' },
]);

const columns: JtTableColumn[] = [
  { type: 'index', label: '序号', width: 70 },
  { prop: 'customerName', label: '客户名称', minWidth: 160 },
  { prop: 'status', label: '客户状态', width: 120, showSlot: true },
];

function handlePageChange(nextPage: number, nextSize: number) {
  page.currentPage = nextPage;
  page.pageSize = nextSize;
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | columns | 表格列配置 | JtTableColumn[] | - | | columnProps | 每个 ElTableColumn 的统一基础配置，对应模板写法 column-props；优先级低于 columns 单列配置，高于组件默认值 | Record<string, unknown> | {} | | data | 表格数据 | Record<string, any>[] | [] | | showPagination | 是否展示内置分页 | boolean | true | | total | 总条数，不传时使用 data.length | number | - | | pageSizes | 每页条数选项 | number[] | [10, 20, 50, 100] | | layout | 分页布局 | string | prev, pager, next, jumper | | hideOnSinglePage | 单页时隐藏分页 | boolean | true | | currentPage | 当前页，支持 v-model:current-page | number | 1 | | pageSize | 每页条数，支持 v-model:page-size | number | 20 |

JtTableColumn

JtTableColumn 继承 Element Plus ElTableColumn 的 props 类型约束，并额外支持以下业务扩展字段。

| 参数 | 说明 | 类型 | | --- | --- | --- | | prop / label | 字段名和列标题 | string | | type | Element Plus 特殊列类型 | 'selection' \| 'index' \| 'expand' | | width / minWidth | 列宽 | number \| string | | align / headerAlign | 单元格和表头对齐方式 | 'left' \| 'center' \| 'right' | | fixed | 固定列 | 'left' \| 'right' \| boolean | | sortable | 排序配置 | boolean \| 'custom' | | showOverflowTooltip | 是否展示溢出 tooltip | boolean | | show | 是否展示当前列，false 时隐藏 | boolean | | showSlot | 是否使用同名插槽渲染单元格 | boolean | | children | 多级表头子列 | JtTableColumn[] |

列属性合并优先级：组件默认值 < columnProps < columns 单列配置。

Events / Slots / Expose

| 名称 | 说明 | | --- | --- | | current-change | 当前页变化时触发 | | size-change | 每页条数变化时触发 | | page-change | 页码或每页条数变化时触发，参数为 page、pageSize | | #toolbar | 表格上方工具栏 | | #empty | 空状态 | | #列prop | 当列配置 showSlot: true 时，用同名插槽自定义单元格 | | doLayout / clearSelection / toggleRowSelection | 暴露的表格实例方法 |

JtTableLayout

JtTableLayout 是搜索区和表格区的纯布局组件。它不处理业务数据，只负责页面结构、标题区和插槽位置。

<template>
  <JtTableLayout :table-header-props="{ title: '客户列表' }">
    <template #search-header>
      <JtPageHeader title="地点"></JtPageHeader>
    </template>

    <template #search>
      <JtFilterBar :model="queryForm" :configs="configs" />
    </template>

    <template #table-header>
      <JtPageHeader title="地点"></JtPageHeader>
    </template>

    <template #table>
      <JtTable :columns="columns" :data="tableData" />
    </template>
  </JtTableLayout>
</template>

Props / Slots

| 名称 | 说明 | 类型 | | --- | --- | --- | | showSearch | 是否展示搜索区 | boolean | | searchHeaderProps | 搜索区标题配置 | JtPageHeaderProps | | tableHeaderProps | 表格区标题配置 | JtPageHeaderProps | | #search-header | 自定义搜索区标题 | | #search | 搜索区内容 | | #table-header | 自定义表格区标题 | | #table | 表格区内容 |

JtCrud

JtCrud 是组合型 CRUD 页面组件，内部按顺序组合 JtTableLayout、JtPageHeader、JtFilterBar 和 JtTable。适合列表页的查询、重置、表格展示、分页和标题操作。

<template>
  <JtCrud
    :model="queryForm"
    :search-props="searchProps"
    :table-header-props="tableHeaderProps"
    :table-props="tableProps"
    @search="handleSearch"
    @reset="handleReset"
    @page-change="handlePageChange"
    @operate-click="handleOperateClick"
  >
    <template #status="{ row }">
      <ElTag :type="row.status === 'enabled' ? 'success' : 'info'">
        {{ row.status === 'enabled' ? '启用' : '停用' }}
      </ElTag>
    </template>
  </JtCrud>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { ElMessage, ElTag } from 'element-plus';
import { JtCrud } from '@jt-home/mfe-components';
import type {
  JTFormItemConfig,
  JtCrudSearchProps,
  JtCrudTableProps,
  JtPageHeaderOperate,
  JtPageHeaderProps,
} from '@jt-home/mfe-components';

const queryForm = reactive({
  customerName: '',
  status: '',
});

const page = reactive({
  currentPage: 1,
  pageSize: 20,
});

const tableData = ref([
  { id: 1, customerName: '上海测试客户', status: 'enabled', city: '上海' },
  { id: 2, customerName: '北京测试客户', status: 'disabled', city: '北京' },
]);

const searchOptions: JTFormItemConfig[] = [
  { prop: 'customerName', label: '客户名称', itemType: 'input', clearable: true },
  {
    prop: 'status',
    label: '客户状态',
    itemType: 'select',
    clearable: true,
    options: [
      { label: '启用', value: 'enabled' },
      { label: '停用', value: 'disabled' },
    ],
  },
];

const searchProps: JtCrudSearchProps = {
  configs: searchOptions,
};

const tableHeaderProps: JtPageHeaderProps = {
  title: '客户列表',
  operates: [{ key: 'add', label: '新增', type: 'primary', onClick: handleAdd  }],
};

const tableProps = computed<JtCrudTableProps>(() => ({
  data: tableData.value,
  total: tableData.value.length,
  currentPage: page.currentPage,
  pageSize: page.pageSize,
  columns: [
    { type: 'index', label: '序号', width: 70 },
    { prop: 'customerName', label: '客户名称', minWidth: 160 },
    { prop: 'status', label: '客户状态', width: 120, showSlot: true },
    { prop: 'city', label: '所属城市', width: 120 },
  ],
}));

function handleSearch() {
  page.currentPage = 1;
  ElMessage.success(`查询：${JSON.stringify(queryForm)}`);
}

function handleReset() {
  queryForm.customerName = '';
  queryForm.status = '';
  page.currentPage = 1;
}

function handlePageChange(nextPage: number, nextSize: number) {
  page.currentPage = nextPage;
  page.pageSize = nextSize;
}

function handleOperateClick(operate: JtPageHeaderOperate) {
  if (operate.key === 'add') {
    handleAdd();
  }
}

const handleAdd = () => {
  console.log('点击新增');
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | model | 查询表单对象，会传给 JtFilterBar | Record<string, any> | {} | | data | 表格数据，优先级高于 tableProps.data | JtCrudTableProps['data'] | - | | searchProps | 查询区配置，等同 JtFilterBar 去掉 model 后的 props | JtCrudSearchProps | { configs: [] } | | tableProps | 表格配置，透传给 JtTable | JtCrudTableProps | { columns: [] } | | showSearch | 是否展示查询区 | boolean | true | | showSearchHeader | 是否展示查询区标题，默认展示，可通过 false 隐藏 | boolean | true | | showTableHeader | 是否展示表格区标题，默认展示，可通过 false 隐藏 | boolean | true | | searchHeaderProps | 查询区标题配置 | JtPageHeaderProps | {} | | tableHeaderProps | 表格区标题配置 | JtPageHeaderProps | {} |

Events / Slots / Expose

| 名称 | 说明 | | --- | --- | | search | 点击查询且查询区表单校验通过后触发，参数为 model | | reset | 点击重置时触发，参数为 model，查询区会清理表单校验状态 | | operate-click | 查询区或表格区标题操作按钮点击时触发 | | current-change / size-change / page-change | 表格分页事件 | | #search-header / #search | 自定义查询标题和查询区 | | #table-header / #table | 自定义表格标题和表格区 | | #列prop | 透传给内部 JtTable 的列插槽 | | doLayout / clearSelection / toggleRowSelection | 透出内部表格实例方法 |