@cimom-ui/standard-ui

标准组件库：基于 Vue 2.6 + Element UI 2.x + vxe-table 3.24.x 的通用业务组件，供其它项目复用。

共 14 个顶层组件。StandardForm、StandardFilterbar、StandardTable、StandardTabs 会连带注册子组件。StandardAdvancedQuery 只给筛选栏的「高级查询」使用，不单独暴露。

属性表里的名字是模板写法（kebab-case），与代码里的 camelCase 一一对应，例如 number-only 对应 numberOnly。事件名也是 kebab-case。

安装

npm i @cimom-ui/standard-ui

使用方必须先安装并注册这些依赖：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(ElementUI)
Vue.use(VXETable)

组件自身的样式已经打进 JS 产物，使用方不用再引一份组件 css。vxe-table 的样式仍由使用方引入。

注册方法

全局注册（推荐）

入口注册一次后，页面直接写标签，不用再 import。

// src/main.js
import StandardComponents from '@cimom-ui/standard-ui'
import axios from '@/util/api.request'

Vue.use(StandardComponents, {
  // 模块编码，和页面编码、表格编码一起定位表头配置
  moduleCode: process.env.VUE_APP_MODULE_CODE,
  // 业务项目自己的请求方法。接口路径固定，IP 和端口来自该方法的 baseURL
  request: (config) => axios.request(config)
})

Vue.use 会注册全部顶层组件，并连带注册这些子组件：

局部注册

lib 构建产物只保留默认导出，组件挂在默认导出对象上。子组件挂在父组件的静态属性上。

import StandardComponents from '@cimom-ui/standard-ui'

export default {
  components: {
    'standard-table': StandardComponents.StandardTable,
    'standard-column': StandardComponents.StandardTable.Column,
    'standard-toolbar-left': StandardComponents.StandardTable.ToolbarLeft,
    'standard-toolbar-right': StandardComponents.StandardTable.ToolbarRight,
    'standard-toolbar-query': StandardComponents.StandardTable.ToolbarQuery,
    'standard-footer-right': StandardComponents.StandardTable.FooterRight,
    'standard-filterbar': StandardComponents.StandardFilterbar,
    'standard-filterbar-item': StandardComponents.StandardFilterbar.Item,
    'standard-form': StandardComponents.StandardForm,
    'standard-form-item': StandardComponents.StandardForm.Item,
    'standard-tabs': StandardComponents.StandardTabs,
    'standard-tab-pane': StandardComponents.StandardTabs.TabPane
  }
}

局部注册不会走库的 install，表头配置的 moduleCode 和 request 不会自动注入。需要「调整」列配置持久化时，使用全局注册。

注意事项

• 先 Vue.use(ElementUI)、Vue.use(VXETable)，再注册本库。按钮、输入框、下拉、时间选择内部固定 size="mini"，页面传 size 不会改掉。
• 全局注册请带上 moduleCode 和 request。表格渲染从浏览器本地存储 TableSetting 读取表头，按「模块编码/页面编码/表格编码」取对应 CLAYOUT，不再逐表调用 GetConfig。保存和恢复默认仍调用 /api/Migration/UserTableColumn/SaveConfig、ResetConfig，成功后回写 TableSetting 里的对应项。GetConfig 不接收模块、页面、表格参数，返回当前用户全部布局，由其它程序调用后写入 TableSetting。没传 request 时不访问服务端，仍可读已有缓存。同一页面里每个表格的 table-code 必须唯一；不传时用组件 ref，ref 也没有则不读写配置。page-code 不传时用当前路由 name，没有 name 时用去掉查询参数的 path。
• <standard-filterbar> 必须接 @search，否则校验失败、整块不渲染，并在控制台输出 [StandardFilterbar] 错误。筛选值写在传入对象的属性上，运行中不要整体替换 searchBar 或 searchVariable。
• 筛选栏默认插槽里只认 <standard-filterbar-item>。插槽项排在 searchCondition 前面，一个插槽项算一条条件。首行放不下的进「更多」或「高级查询」。isMain 可以写在配置里，不再决定谁在首行。
• <standard-dialog> 的 @confirm 不关闭弹窗，业务成功后再改 v-model。点击遮罩默认不关闭。标题栏默认可拖拽，再次打开回到居中。
• <standard-toolbar-query> 只能放在 <standard-toolbar-right> 里面。放错位置不渲染，并 console.warn。右上角「调整」由 <standard-table show-adjustment> 控制，默认显示；写在 standard-toolbar-right 上不生效。
• <standard-form-item> 必须放在 <standard-form> 里，:span 用数字绑定（:span="12"）。字符串 span="12" 不会按栅格计算。
• 树形表格同时传 tree-config 和 row-config。节点列加 tree-node。row-config.keyField 与 tree-config.rowField 用同一个字段。
• 页面根节点用 <standard-page>。左右分栏加 vertical。拖完分割条后对两侧表格调用 recalculate()。
• 弹窗里的表格要给明确高度（例如 style="height: 420px"）。表格位于 el-dialog 内、右键菜单被挡住时，给表格传 z-index（大于弹窗层级，如 3000），或在使用方执行 VXETable.setup({ zIndex: 5000 })。本库 install 里的 zIndex: 5000 只作用于打进产物的那份 vxe-table。

组件总览

组件说明

StandardButton 标准按钮

单标签用 label，双标签用默认插槽。插槽有内容时优先于 label。内部固定 size="mini"。loading、disabled、@click 等透传 el-button。

插槽：默认插槽，按钮文案。

<standard-button label="查询" type="primary" icon="el-icon-search" :loading="loading" @click="onSearch" />
<standard-button type="danger" @click="onDelete">删除</standard-button>

StandardInput 标准输入框

v-model 绑值，输入时自动 trim。内部固定 size="mini"、可清空，宽度 175px。class、disabled、@focus、@blur、@clear 等透传。

事件：@input（v-model）、@enter（回车）。其余透传。

插槽：

<standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
<standard-input v-model="form.qty" number-only>个</standard-input>

StandardSelect 标准下拉

单选绑定任意值。multiple 时绑定值必须是数组，组件会兜底成 []。内部固定 size="mini"、可清空，宽度 175px。远程模式强制 filterable 和 reserve-keyword。

事件：@input、@change、@visible-change。其余透传 el-select。

插槽：默认插槽，写在自动生成的 el-option 之后，可追加选项。

远程方法返回 Promise。返回值可以是数组，或带 Datas / data / data.Datas / list 的响应。组件防抖 300ms，自己管 loading，首次挂载以及下拉展开且没有数据时会拉取。

<standard-select v-model="form.type" :options="typeOptions" />
<standard-select v-model="form.types" multiple :options="typeOptions" />
<standard-select
  v-model="form.deptId"
  remote="remoteDeptList"
  :option-props="{ label: 'DEPT_NAME', value: 'DEPT_ID' }"
  placeholder="请选择部门"
/>

StandardTimePick 标准时间选择

type 只认 date（默认，年月日）和 datetime（年月日时分秒）。内部固定 size="mini"、可清空、弹出面板右对齐，宽度 175px。

事件：@input。其余透传。无插槽。

<standard-time-pick v-model="form.checkDate" />
<standard-time-pick v-model="form.checkTime" type="datetime" />

StandardDialog 标准弹窗

双标签。v-model 控制显隐。宽度随内容撑开，最小 300px，最宽 80vw；最高 80vh，超出后内容区内部滚动。底部按钮固定为「取消」「确定」，都是 mini。

width、append-to-body、show-close、custom-class 等经 $attrs 传给 el-dialog。

事件：

插槽：默认插槽，弹窗内容。标题和底部按钮不开放插槽。

<standard-dialog v-model="visible" title="新增" :confirm-loading="saving" @confirm="submit" @close="close">
  <standard-form ref="editForm" :model="form" :rules="rules"><!-- 表单项 --></standard-form>
</standard-dialog>

StandardContainer 标准布局容器

双标签。没有边框、背景和内边距，只负责方向和尺寸。子项不放大、不压缩，交叉轴拉伸填满。

插槽：默认插槽。

放进弹窗时，百分比要生效，顶层容器需要显式高度或宽度。

<standard-container direction="row" width="400px">
  <standard-container><!-- 左 --></standard-container>
  <standard-container><!-- 右 --></standard-container>
</standard-container>

StandardFilterbar 标准筛选栏

单标签靠 v-model 配条件；双标签时，默认插槽里的 <standard-filterbar-item> 排在配置条件之前。首行按容器宽度排布，单项宽在 175–300px。放不下的进「更多」。show-advanced-query 时改为「高级查询」弹层，不再展开次行。

v-model 绑定：

searchBar: {
  searchCondition: [],   // 条件配置，可省略
  searchVariable: {},    // 键必须覆盖每条条件的 value，初始值就是重置目标
  mainConditionCount     // 可选。首行条数上限。不传则只受宽度限制
}

事件：

插槽：默认插槽。只收集 <standard-filterbar-item>，其它节点忽略。

条件 type：

条件字段：label、value（必填，且必须已存在于 searchVariable）、type（必填）。可选 placeholder、clearable（默认 true）、width（数字 px 或 CSS 宽度）、selectSource、remote（函数或父组件方法名）、optionProps: { label, value }。远程返回值约定与 standard-select 相同，防抖 300ms。

<standard-filterbar
  v-model="searchBar"
  show-export
  reset-trigger-search
  :loading="loading"
  @search="onSearch"
  @export="onExport"
>
  <standard-filterbar-item label="车间">
    <el-select v-model="extra.workshop" size="mini" clearable placeholder="请选择车间" />
  </standard-filterbar-item>
</standard-filterbar>

searchBar: {
  searchCondition: [
    { label: '开始时间', value: 'startTime', type: 'datetime', clearable: false },
    { label: '关键字', value: 'keyword', type: 'text', placeholder: '请输入关键字' },
    { label: '部门', value: 'deptId', type: 'select', remote: 'remoteDeptList',
      optionProps: { label: 'DEPT_NAME', value: 'DEPT_ID' } },
    { label: '状态', value: 'status', type: 'select',
      selectSource: [{ label: '全部', value: '-1' }, { label: '启用', value: '1' }] }
  ],
  searchVariable: { startTime: '', keyword: '', deptId: '', status: '-1' }
}

插槽里的控件不进 searchVariable，重置按钮不会清它们。需要联动清空时听 @reset。

子组件 StandardFilterbarItem

放在 <standard-filterbar> 默认插槽里。标题在上、控件在下。一个组件算一条条件。

插槽：默认插槽，放具体控件（el-select、el-input、standard-input 等）。

StandardForm / StandardFormItem 标准表单

双标签。label 宽度按全部表单项里最长的 label 计算：中文 15px/字 + 英文 10px/字 + 40px。控件尺寸默认 mini。表单项内控件样式为宽度 100%。

StandardForm

label-width 由组件计算，不要再传。其余属性、事件透传 el-form。

对外方法（ref）：validate、resetFields、clearValidate。

插槽：默认插槽，放 <standard-form-item>。

StandardFormItem

required 等其余属性透传 el-form-item。

插槽：默认插槽，放输入控件。

<standard-form ref="editForm" :model="form" :rules="rules" width="600px">
  <standard-form-item label="名称" prop="NAME" :span="12">
    <standard-input v-model="form.NAME" placeholder="请输入名称" />
  </standard-form-item>
  <standard-form-item label="备注">
    <el-input v-model.trim="form.REMARK" type="textarea" :rows="3" />
  </standard-form-item>
</standard-form>

StandardHalfArea 标准半区

双标签。默认是白底圆角卡片。左右分栏时和 <standard-splitter> 一起放在 <standard-page vertical> 里。

插槽：默认插槽。

<standard-half-area left :style="{ width: leftWidth + 'px' }"><!-- 左 --></standard-half-area>
<standard-splitter v-model="leftWidth" />
<standard-half-area right><!-- 右 --></standard-half-area>

StandardPage 标准页面骨架

双标签。自带 16px 内边距（宽度 ≤768px 时 12px）、白底、overflow: hidden、纵向 flex。页面本身不出现滚动条，滚动发生在表格等内容区。

插槽：默认插槽，放筛选区、半区、表格、弹窗。

<standard-page :client="isClient">
  <standard-filterbar v-model="searchBar" @search="onSearch" />
  <standard-table :table-data="tableData" />
</standard-page>

StandardSplitter 标准分割条

单标签。拖拽改变左侧宽度。拖拽中禁止选中文字。

事件：@input（拖拽中）、@drag-start、@drag-end、@change（后两个在松手时派发，参数为最终宽度）。无插槽。

联动页在 @drag-end 里对两侧表格调用 recalculate()。

StandardTable 标准表格

双标签，基于 vxe-table。数据用 table-data，操作列用 table-operation。工具栏、分页、列都在默认插槽里声明，由表格拿到对应区域渲染。列组件本身不占布局。

操作列每一项：

按钮不超过 3 个时全部显示。超过 3 个时前 3 个直出，其余进「更多」。

事件：

未传 menu-config 且 show-context-menu 为 true 时，单元格菜单为「复制」加上操作列按钮。

对外方法（ref）：

插槽：

子组件 StandardToolbarLeft

放在 <standard-table> 默认插槽内，渲染到操作区左侧。

事件：@toolbar-click，参数为按钮对象。

插槽：默认插槽，和 buttons 一起显示。插槽里的按钮自己绑事件。

子组件 StandardToolbarRight

放在 <standard-table> 默认插槽内，渲染到操作区右侧、「调整」按钮之前。

无需要页面传入的属性。插槽：默认插槽，放按钮或 <standard-toolbar-query>。

子组件 StandardToolbarQuery

只能作为 <standard-toolbar-right> 的子组件。从左到右是输入框、查询；show-export 时再加导出。间距 6px。回车与点击查询相同。

事件：@input、@query、@export。后两个参数都是当前关键字。传了 method 仍会派发事件。无插槽。

子组件 StandardToolbarEmpty

操作区没有任何左右工具栏时，表格会自己留出一块 10px 间距。页面一般不用写。写了 <standard-toolbar-empty /> 也是同一块占位。左右工具栏有其一则不占位。无属性、无插槽。

子组件 StandardColumn

声明列，必须放在 <standard-table> 内（可以隔着 tabs 等中间层）。自身不显示。

插槽：

子组件 StandardFooterLeft

底部栏左侧文本。出现后底部栏自动显示，并占用「数据更新时间」的位置。

无插槽。自定义结构用表格的 footer-left 插槽，并打开 show-footer。

子组件 StandardFooterRight

底部栏右侧分页。出现后底部栏自动显示。

事件：@page-change，参数 { currentPage, pageSize, type }。type 为 page（翻页）或 size（改每页条数，此时 currentPage 为 1）。无插槽。

子组件 StandardFooterEmpty

没有左右底部内容时，用来留出与底部栏相同的 10px 上间距。左右底部子组件有其一则不占位。无属性、无插槽。

<standard-table
  ref="mainTable"
  table-code="main"
  :table-data="tableData"
  :table-operation="tableOperation"
  :loading="loading"
  :show-update-time="false"
>
  <standard-toolbar-left>
    <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
  </standard-toolbar-left>
  <standard-toolbar-right>
    <standard-toolbar-query v-model="keyword" query-method="onQuery" :loading="loading" />
  </standard-toolbar-right>
  <standard-footer-left :text="footerText" />
  <standard-footer-right
    :current-page="pageParams.currentPage"
    :page-size="pageParams.pageSize"
    :page-sizes="[10, 20, 50, 100]"
    :total="pageParams.totalResult"
    @page-change="onPageChange"
  />
  <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
  <standard-column field="CODE" title="编码" :min-width="120" sortable />
  <standard-column field="STATUS" title="状态" :width="100" :min-width="100" align="center">
    <template #default="{ row }"><!-- 状态标签 --></template>
  </standard-column>
</standard-table>

树形模式：

<standard-table
  :table-data="tableData"
  :tree-config="treeConfig"
  :row-config="rowConfig"
  @toggle-tree-expand="onToggleTreeExpand"
>
  <standard-column tree-node field="NAME" title="名称" :min-width="220" fixed="left" />
</standard-table>

treeConfig: { transform: true, rowField: 'id', parentField: 'parentId', trigger: 'row', showIcon: true, indent: 20 }
rowConfig: { keyField: 'id' }

StandardTabs / StandardTabPane 标准页签

双标签。头部和内容区是同一张卡片。type、tab-position、stretch 以及 @tab-click、@edit 等透传 el-tabs。

StandardTabs

插槽：默认插槽，放 <standard-tab-pane>。

StandardTabPane

继承 Element UI 的 TabPane。常用属性：label、name、closable、disabled、lazy。插槽：默认插槽，pane 内容。

全局注册名是 StandardTabPane，不会覆盖页面里的 <el-tab-pane>。

<standard-tabs v-model="activeTab" lazy @tab-click="onTabClick">
  <standard-tab-pane label="明细" name="detail">
    <standard-table :table-data="detailData" />
  </standard-tab-pane>
  <standard-tab-pane label="记录" name="record" />
</standard-tabs>

StandardTree 标准树

单标签。上为搜索，中为树，下为「全部展开 / 全部收起」。默认手风琴、高亮当前节点、点击节点展开。自带卡片外观。

事件：@node-click、@node-expand、@node-collapse。参数与 el-tree 相同：(data, node, tree)。

对外方法（ref）：setCurrentKey(key) 设置或取消选中；filter(keyword) 按名称过滤。

无插槽。节点图标和文字由组件内部渲染。

<standard-tree
  ref="tree"
  v-model="treeData"
  node-key="id"
  :default-expanded-keys="[1]"
  transparent
  @node-click="onNodeClick"
/>

treeData: [
  { id: 1, label: '总部', children: [
    { id: 11, label: '技术部' },
    { id: 12, label: '财务部' }
  ]},
  { id: 2, label: '分公司' }
]

页面骨架

下面五种对应 Web 前端样板里的页面，只保留组件嵌套。样板目录：listPage、multiListPage、linkPage、treeLinkPage、toolbarQueryPage。

标准列表页（listPage）

筛选栏 + 表格（工具栏、底栏、列）+ 详情弹窗里的表格。

<standard-page :client="isClient">
  <standard-filterbar v-model="searchBar" show-export reset-trigger-search :loading="loading"
                      @search="onSearch" @export="onExport" />
  <standard-table ref="mainTable" :table-data="tableData" :table-operation="tableOperation"
                  :loading="loading" :show-update-time="false">
    <standard-toolbar-left>
      <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
    </standard-toolbar-left>
    <standard-toolbar-right />
    <standard-footer-left :text="footerText" />
    <standard-footer-right :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
                           :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
                           @page-change="onPageChange" />
    <standard-column type="seq" title="序号" fixed="left" />
    <standard-column field="CODE" title="编码" :min-width="120" sortable />
  </standard-table>

  <el-dialog :visible.sync="showDetail" :title="detailTitle" width="900px">
    <standard-table :table-data="detailData" :loading="detailLoading" :show-update-time="false"
                    style="height: 420px">
      <standard-toolbar-right>
        <standard-button type="primary" label="导出" @click="onDetailExport" />
      </standard-toolbar-right>
      <standard-column field="NAME" title="项目名称" :min-width="150" />
    </standard-table>
  </el-dialog>
</standard-page>

多层级树表格页（multiListPage）

筛选栏（可含插槽条件）+ 树表 + 弹窗。弹窗里用容器并排表单和表格。

<standard-page :client="isClient">
  <standard-filterbar v-model="searchBar" reset-trigger-search :loading="loading"
                      @search="onSearch" @reset="onResetExtra">
    <standard-filterbar-item label="车间">
      <el-select v-model="extra.workshop" size="mini" clearable />
    </standard-filterbar-item>
  </standard-filterbar>

  <standard-table ref="xTable" :table-data="tableData" :table-operation="tableOperation"
                  :loading="loading" :show-update-time="false"
                  :tree-config="treeConfig" :row-config="rowConfig"
                  @toggle-tree-expand="onToggleTreeExpand">
    <standard-toolbar-left>
      <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
    </standard-toolbar-left>
    <standard-toolbar-right>
      <standard-button :label="expanded ? '收起' : '展开'" @click="toggleExpandAll" />
    </standard-toolbar-right>
    <standard-footer-empty />
    <standard-column tree-node field="NAME" title="名称" :min-width="220" fixed="left" />
    <standard-column field="CODE" title="编码" :width="110" :min-width="110" align="center" />
  </standard-table>

  <standard-dialog v-model="showEdit" :title="dialogTitle" :confirm-loading="saving"
                   @confirm="submit" @close="close">
    <standard-container direction="row" width="400px">
      <standard-container>
        <standard-form ref="editForm" :model="form" :rules="formRules">
          <standard-form-item label="名称" prop="NAME" :span="12">
            <standard-input v-model="form.NAME" />
          </standard-form-item>
        </standard-form>
      </standard-container>
      <standard-container>
        <standard-table :table-data="dialogTableData">
          <standard-toolbar-left>
            <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAddLine" />
          </standard-toolbar-left>
          <standard-footer-empty />
          <standard-column field="CODE" title="编码" />
        </standard-table>
      </standard-container>
    </standard-container>
  </standard-dialog>
</standard-page>

左右联动页（linkPage）

左右半区透明，中间百分比分割条。左侧筛选 + 表格；右侧筛选 + 页签，每个页签一张表。

<standard-page :client="isClient" vertical>
  <standard-half-area v-show="leftVisible" transparent :style="leftPanelStyle">
    <standard-filterbar v-model="leftSearchBar" show-advanced-query reset-trigger-search
                        :loading="leftLoading" @search="onLeftSearch" />
    <standard-table ref="leftTable" :table-data="leftTableData" :loading="leftLoading"
                    :show-update-time="false" @current-change="onLeftCurrentChange">
      <standard-toolbar-left :buttons="leftToolbarButtons" />
      <standard-footer-right :current-page="leftPage.currentPage" :page-size="leftPage.pageSize"
                             :page-sizes="[10, 20, 50, 100]" :total="leftPage.totalResult"
                             @page-change="onLeftPageChange" />
      <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
      <standard-column field="NAME" title="名称" :min-width="180" sortable />
    </standard-table>
  </standard-half-area>

  <standard-splitter v-show="leftVisible && rightVisible" v-model="leftPercent" unit="percent"
                     @drag-end="recalculateAll" />

  <standard-half-area v-show="rightVisible" right transparent>
    <standard-filterbar :key="activeTab" v-model="rightSearchBar" show-advanced-query
                        reset-trigger-search :loading="rightLoading" @search="onRightSearch" />
    <standard-tabs v-model="activeTab" lazy @tab-click="onTabClick">
      <standard-tab-pane label="明细" name="detail">
        <standard-table ref="detailTable" :table-data="detailData" :loading="rightLoading"
                        :show-update-time="false">
          <standard-toolbar-left :buttons="detailToolbarButtons" />
          <standard-footer-right :current-page="rightPage.currentPage" :page-size="rightPage.pageSize"
                                 :page-sizes="[10, 20, 50, 100]" :total="rightPage.totalResult"
                                 @page-change="onRightPageChange" />
          <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
        </standard-table>
      </standard-tab-pane>
      <standard-tab-pane label="记录" name="record" />
      <standard-tab-pane label="日志" name="log" />
    </standard-tabs>
  </standard-half-area>
</standard-page>

树 + 列表联动页（treeLinkPage）

左半区放树，分割条用像素宽度，右半区是带关键字查询的表格，弹窗里放表单。

<standard-page :client="isClient" vertical>
  <standard-half-area v-show="leftVisible" left :style="{ width: leftWidth + 'px' }">
    <standard-tree ref="tree" v-model="treeData" node-key="id" :default-expanded-keys="[1]"
                   transparent @node-click="onNodeClick" />
  </standard-half-area>

  <standard-splitter v-show="leftVisible" v-model="leftWidth" :min-width="200" :max-ratio="0.6" />

  <standard-half-area right>
    <standard-table ref="xTable" :table-data="tableData" :table-operation="tableOperation"
                    :loading="loading" show-footer :show-update-time="false">
      <standard-toolbar-left>
        <standard-button :label="leftVisible ? '收起' : '展开'" @click="toggleLeft" />
        <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
        <standard-button icon="el-icon-upload" label="导出" @click="onExport" />
      </standard-toolbar-left>
      <standard-toolbar-right>
        <standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
        <standard-button type="primary" icon="el-icon-search" label="查询" :loading="loading" @click="onSearch" />
      </standard-toolbar-right>
      <template #footer-left><!-- 当前节点 --></template>
      <standard-footer-right :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
                             :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
                             @page-change="onPageChange" />
      <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
      <standard-column field="CODE" title="编码" :min-width="140" sortable />
    </standard-table>
  </standard-half-area>

  <standard-dialog v-model="showEdit" :title="dialogTitle" :confirm-loading="saving"
                   @confirm="submit" @close="close">
    <standard-form ref="editForm" :model="form" :rules="formRules" width="400px">
      <standard-form-item label="编码" prop="CODE" :span="12">
        <standard-input v-model="form.CODE" />
      </standard-form-item>
    </standard-form>
  </standard-dialog>
</standard-page>

树表联动页若要显示 #footer-left，表格需要 show-footer。只放 <standard-footer-right> 时底部栏也会出现，此时左侧自定义内容仍要 show-footer。

工具栏查询列表页（toolbarQueryPage）

没有独立筛选栏。关键字查询放在表格右侧工具栏。

<standard-page :client="isClient">
  <standard-table ref="mainTable" :table-data="tableData" :loading="loading" :show-update-time="false">
    <standard-toolbar-left>
      <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
      <standard-button icon="el-icon-refresh" label="刷新" @click="onRefresh" />
    </standard-toolbar-left>
    <standard-toolbar-right>
      <standard-toolbar-query v-model="keyword" placeholder="请输入编码/名称" query-method="onQuery"
                              show-export export-method="onExport" :loading="loading" />
    </standard-toolbar-right>
    <standard-footer-right :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
                           :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
                           @page-change="onPageChange" />
    <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
    <standard-column field="CODE" title="编码" :min-width="140" sortable />
    <standard-column field="NAME" title="名称" :min-width="180" sortable />
  </standard-table>
</standard-page>

开发与构建

npm install
npm run build

使用 @vue/cli-service 的 lib 模式，产物在 dist/：standard-ui.common.js（CommonJS）和 standard-ui.umd.min.js（UMD）。样式打进 JS。vue 由构建工具 external。src/index.js 会 import vxe-table，因此 element-ui、vxe-table 及其运行时依赖 @vxe-ui/core 的部分代码会打进 dist。

vxe-table 3.24 说明

本包 peerDependencies 为 vxe-table ^3.24.0。使用方注册方式不变：import VXETable from 'vxe-table'、引入 vxe-table/lib/style.css、Vue.use(VXETable)。

• vxe-table 3.24 运行时依赖 @vxe-ui/core，但其 package.json 未声明该依赖。本包已在 dependencies 中声明 @vxe-ui/core ^3.4.24。使用方若单独使用 vxe-table、不依赖本包，需要自己安装 @vxe-ui/core@^3.4.24。
• 从 3.6 / 3.8 升到 3.24 时，使用方自己写的 vxe-table 需要注意：纵向/横向虚拟滚动默认关闭；tree-config 的 line / hasChild / children 更名为 showLine / hasChildField / childrenField（旧名仍兼容）；图标 fixed / fixed-fill 更名为 fixed-left / fixed-left-fill。
• 本库 install 时执行的 VXETable.setup({ zIndex: 5000 }) 只作用于产物内的副本。使用方自己的 vxe-table 要在 main.js 里另行 setup，或给 <standard-table> 传 z-index。
• vxe-table 3.24 是 Vue 2 线的最后版本，Vue 2.6 可直接使用。

发布

npm run build
npm login
npm publish

files 只有 dist，发布内容是构建产物和 README。版本更新用 npm version patch|minor|major 后再 npm publish。