@hz_yujin/vue2-base-table

基于 Vue 2.6 / 2.7 + Element UI + vxe-table 的 ProTable 组件库。

• Vue 2.7：直接使用内置 Composition API
• Vue 2.6：需安装并注册 @vue/composition-api（老项目如已安装可直接复用）

能力概览

| 能力 | 说明 | |------|------| | ProPageTable / ProTable / ProSearchForm | 搜索 + 表格一体化 | | ProDialog | 独立弹框封装（与表格并列组合，非表格内置） | | valueType | money / digit / percent / date / datetime / tag / select / link / image / copyable | | 表头筛选 | 列 filters + 持久化 | | 搜索控件 | input / textarea / number / select / select-multiple / date* / radio / checkbox / switch / slot | | useProTableRequest | Composition API 受控请求封装 | | 工具栏 | 刷新 / 列设置（默认）；全屏 / 导出 / 打印需 toolbar.zoom / export / print 开启 | | 树表 | tree-config | | 行内编辑 | edit-config + 列 editRender | | 批量操作 | batch-actions | | 跨页多选 | reserve-selection（需配合 row-key） | | 骨架屏 | skeleton | | 持久化 | storage-key（分页/排序/筛选/搜索/展开/列） | | 移动端卡片 | mobile-card |

安装

Vue 2.7

npm install @hz_yujin/vue2-base-table element-ui [email protected] xe-utils

Vue 2.6（如 2.6.14）

npm install @hz_yujin/vue2-base-table element-ui [email protected] xe-utils @vue/composition-api

老项目若已有 @vue/composition-api，无需重复安装。

注册

Vue 2.7

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'
import Vue2BaseTable from '@hz_yujin/vue2-base-table'
import '@hz_yujin/vue2-base-table/style.css'

Vue.use(ElementUI)
Vue.use(VXETable)
// 宿主布局层级较高时可：Vue.use(Vue2BaseTable, { zIndex: 4000 })
Vue.use(Vue2BaseTable)

Vue 2.6

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import Vue2BaseTable from '@hz_yujin/vue2-base-table'
import '@hz_yujin/vue2-base-table/style.css'

// 必须在表格插件之前注册
Vue.use(VueCompositionAPI)
Vue.use(ElementUI)
Vue.use(VXETable)
Vue.use(Vue2BaseTable)

Vue CLI 3 工程如遇 ESM 解析问题，可在 vue.config.js 中加入： transpileDependencies: ['@hz_yujin/vue2-base-table', 'vue-demi']

ProDialog

与表格并列使用的弹框封装，不内嵌在 ProTable 中。基于 el-dialog，统一圆角、标题栏与底部操作区样式。

基础用法

<template>
  <div>
    <el-button type="primary" @click="visible = true">打开</el-button>

    <ProDialog
      v-model="visible"
      title="编辑用户"
      size="medium"
      :confirm-loading="saving"
      @confirm="handleSave"
      @cancel="visible = false"
    >
      <el-form label-width="80px" size="small">
        <!-- 表单内容 -->
      </el-form>
    </ProDialog>
  </div>
</template>

<script>
export default {
  data() {
    return { visible: false, saving: false }
  },
  methods: {
    async handleSave() {
      this.saving = true
      try {
        // await api.save(...)
        this.visible = false
      } finally {
        this.saving = false
      }
    },
  },
}
</script>

也可用 :visible.sync="visible" 控制显隐（与 v-model 二选一即可）。

Props

| Prop | 类型 | 默认 | 说明 | |------|------|------|------| | value | Boolean | false | 显隐，配合 v-model | | visible | Boolean | — | 显隐，配合 :visible.sync；传入时优先于 value | | title | String | '' | 标题文案（可用 title 插槽覆盖） | | size | String | 'large' | 尺寸预设：small / medium / large / full | | width | String | — | 自定义宽度，传入后优先于 size | | top | String | '15vh' | 距顶部距离 | | modal | Boolean | true | 是否显示遮罩 | | appendToBody | Boolean | true | 是否插入至 body | | destroyOnClose | Boolean | false | 关闭时销毁内容 | | closeOnClickModal | Boolean | false | 点击遮罩是否关闭 | | closeOnPressEscape | Boolean | true | 按 ESC 是否关闭 | | showClose | Boolean | true | 是否显示右上角关闭按钮 | | showFooter | Boolean | true | 是否显示底部栏（有 footer 插槽时也会显示） | | showCancel | Boolean | true | 是否显示取消按钮 | | showConfirm | Boolean | true | 是否显示确定按钮 | | cancelText | String | '取消' | 取消按钮文案 | | confirmText | String | '确定' | 确定按钮文案 | | confirmType | String | 'primary' | 确定按钮 el-button type，如 primary / danger | | confirmLoading | Boolean | false | 确定按钮 loading | | confirmDisabled | Boolean | false | 确定按钮禁用 | | beforeClose | Function | — | 关闭前钩子，签名 (done) => void，需自行调用 done() | | customClass | String | '' | 追加到弹框根节点的自定义 class | | zIndex | Number | — | 可选。透传 Element Popup（遮罩与弹框同步）。默认不传，由统一起点 + 自动递增；多层弹框请勿写死 |

层级约定

| 场景 | z-index | |------|---------| | 表格全屏 | 2900 | | ProDialog / 遮罩 | 自弹框起点（默认 3000）起由 PopupManager 自动递增 | | vxe Modal（列设置「恢复默认」等） | 与弹框起点对齐（默认 3000，随 setPopupZIndexBase 抬高） | | MessageBox | 弹框起点 + 1900（默认 4900） | | Message / Notification | 弹框起点 + 2000（默认 5000） |

若宿主顶栏 / 抽屉 / 无界遮罩等高于默认起点，在入口抬高即可（MessageBox 会自动跟着抬）：

import Vue2BaseTable, {
  setPopupZIndexBase,
  getPopupLayerZIndex,
} from '@hz_yujin/vue2-base-table'
import '@hz_yujin/vue2-base-table/style.css'

// 方式一：插件选项（推荐）
Vue.use(ElementUI, { zIndex: 12000 })
Vue.use(Vue2BaseTable, { zIndex: 12000 })
// → Dialog 自 12000 起；MessageBox≈13900；Message≈14000

// 方式二：显式 API
setPopupZIndexBase(12000)
const { messageBox } = getPopupLayerZIndex()

业务弹层用 ProDialog；删改确认继续用 $confirm / MessageBox。

size 与宽度对照

| size | 宽度 | |------|------| | small | 420px | | medium | 560px | | large | 720px | | full | 92% |

Events

| 事件 | 说明 | |------|------| | input / update:value | v-model 更新 | | update:visible | :visible.sync 更新 | | confirm | 点击确定（不会自动关闭，由业务在逻辑完成后自行将显隐设为 false） | | cancel | 点击取消（会关闭弹框） | | open | 打开动画开始前 | | opened | 打开动画结束后 | | close | 关闭动画开始前 | | closed | 关闭动画结束后 |

Slots

| 插槽 | 说明 | |------|------| | 默认 | 弹框主体内容 | | title | 自定义标题区 | | footer | 自定义底部（覆盖默认取消/确定） |

按需引入

import { ProDialog } from '@hz_yujin/vue2-base-table'

全局注册时（Vue.use(Vue2BaseTable)）已自动注册为 ProDialog。支持 prefix、zIndex 选项，例如 Vue.use(Vue2BaseTable, { prefix: 'Hz', zIndex: 4000 })。