Vue UI 组件库

@sud-web/vue-ui 是基于 Element Plus 封装的业务组件库，提供管理后台常用的表格、搜索、分页组件。

安装

npm install @sud-web/vue-ui

前置依赖

组件库以 Element Plus 和 Vue 作为 peerDependencies，需确保项目中已安装：

npm install element-plus vue

引入样式

在入口文件中引入 Element Plus 样式和组件库样式：

// main.ts
import 'element-plus/dist/index.css'
import '@sud-web/vue-ui/style.css'

@sud-web/vue-ui/style.css 包含组件库自身的样式（表格、搜索、分页等），Element Plus 的样式需单独引入。

无需 import ElementPlus from 'element-plus' + app.use(ElementPlus)：PcTable / PcSearch 会在注册时自动按需注册它们依赖的 Element Plus 组件与指令（如 el-table、el-form、v-loading 等）。

使用组件

全局注册（推荐）

直接对组件调用 app.use() 即可——它们的 install 内部会自动按需注册所依赖的 Element Plus 组件/指令，不需要 app.use(ElementPlus)：

// main.ts
import { createApp } from 'vue'
import 'element-plus/dist/index.css'
import { PcTable, PcSearch, Pagination } from '@sud-web/vue-ui'
import '@sud-web/vue-ui/style.css'
import App from './App.vue'

const app = createApp(App)
// install 自动按需注册依赖的 Element Plus 组件/指令，无需 app.use(ElementPlus)
app.use(PcTable)
app.use(PcSearch)
// Pagination 是普通组件，没有 install，需要时手动注册
app.component('Pagination', Pagination)
app.mount('#app')

app.use(PcTable) / app.use(PcSearch) 会同时把组件本身（PcTable / PcSearch）注册为全局组件，因此注册后可在任意 .vue 中直接使用，无需再 import。

注册后直接在模板中使用：

<template>
  <pc-search v-model="query" :form-list="formList" @request="onSearch" />
  <pc-table ref="tableRef" :request-api="fetchList" :req-params="query" :colum-list="columns" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableRef = ref()
const query = ref({ keyword: '' })
const formList = [{ prop: 'keyword', label: '关键词', type: 'input' }]
const columns = [{ prop: 'name', label: '名称' }, { prop: 'status', label: '状态' }]

function fetchList(params: any) {
  return api.getUserList(params)
}

function onSearch() {
  tableRef.value?.requestData('reset')
}
</script>

局部使用与「其它 el-* 组件」

完成一次 app.use(PcTable) / app.use(PcSearch) 后，组件库依赖的 Element Plus 组件已被注册，你可以在单个 .vue 中直接 import 使用，也可以直接用全局标签：

<script setup lang="ts">
import { PcTable } from '@sud-web/vue-ui'
</script>

⚠️ 自动注册只覆盖组件库内部依赖的那些 Element Plus 组件。如果你的页面里还直接用到了其它 el-*（如 el-button、el-tag、el-menu 等），请在项目中配置 unplugin-vue-components 的 ElementPlusResolver 自动按需引入，或自行 app.use(ElementPlus)。仓库内 example/vue-ui、example/vue-ui-ondemand 两个示例展示了这两种完整接入方式。

可用组件

组件	说明	文档
PcTable	基于 el-table 封装，支持自动请求、分页、多选、自定义列渲染	查看
PcSearch	配置化搜索表单，支持输入框、下拉、日期选择	查看
Pagination	分页组件，支持自定义每页条数、响应式布局	查看

全局类型（TypeScript）

组件实例类型 PcTableInstance、PcSearchInstance 已提供全局声明入口。在项目 tsconfig.json 的 compilerOptions.types 中加入 @sud-web/vue-ui/global，即可在任意 .vue / .ts 中直接使用，无需逐个 import：

// tsconfig.json
{
  "compilerOptions": {
    "types": ["@sud-web/vue-ui/global"]
  }
}

// 配置后无需 import type，直接使用
const tableRef = ref<PcTableInstance>()
const searchRef = ref<PcSearchInstance>()

已注册的全局类型：PcTableInstance、PcSearchInstance。其余类型（IColumList、FormItemProp 等）仍按需 import type { ... } from '@sud-web/vue-ui'。

国际化

组件内置中文文案。如需覆盖，可通过全局配置或组件 locale 属性：

import { setGlobalLocale, setSearchGlobalLocale } from '@sud-web/vue-ui'

// 表格文案
setGlobalLocale({
  index: 'No.',
  action: 'Actions',
  creator: 'Created By',
  createTime: 'Created At',
  updater: 'Updated By',
  updateTime: 'Updated At'
})

// 搜索文案
setSearchGlobalLocale({
  search: 'Search',
  reset: 'Reset'
})

也可以在单个组件上通过 locale 属性局部覆盖：

<pc-table :locale="{ action: 'Actions' }" ... />