el-plus 0.0.113 → 0.0.115

package/docs/components/table.md

@@ -1,145 +1,145 @@
-# EpTable 数据表格
-
-基于 el-table 封装，支持配置化列、分页、操作列等功能。
-
-## 基本用法
-
-```vue
-<template>
-  <EpTable
-    :data="tableData"
-    :columns="columns"
-    :action-buttons="actionButtons"
-  />
-</template>
-
-<script setup lang="tsx">
-import { ref } from 'vue'
-
-const tableData = ref([])
-
-const columns = [
-  { prop: 'name', label: '名称' },
-  { prop: 'status', label: '状态' },
-]
-
-const actionButtons = [
-  { name: '编辑', onClick: (row) => {} },
-  { name: '删除', onClick: (row) => {} },
-]
-</script>
-```
-
-## Props
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| data | 表格数据 ^el^ | `array` | `[]` |
-| columns | 列配置 | [`TableColumn[]`](#tablecolumn-配置) | `[]` |
-| api | 数据接口 | `string \| (reqData) => Promise` | - |
-| method | 请求方法 | `string` | `'post'` |
-| reqData | 请求体数据 | `object` | `{}` |
-| reqParams | URL 参数 | `object` | `{}` |
-| reqBefore | 请求前处理 | `(reqData) => reqData` | - |
-| reqAfter | 响应后处理 | `(res) => data` | - |
-| size | 表格尺寸 ^el^ | `'large' \| 'default' \| 'small'` | `'default'` |
-| border | 是否带边框 ^el^ | `boolean` | `true` |
-| headerCellStyle | 表头样式 ^el^ | `object` | `{ background: '#EEEFF3', fontSize: '14px', color: '#505050' }` |
-| showSelectionCol | 显示多选列 | `boolean` | `false` |
-| showSingleSelectionCol | 显示单选列 | `boolean` | `false` |
-| showIndexCol | 显示序号列 | `boolean` | `true` |
-| align | 对齐方式 | `'left' \| 'center' \| 'right'` | `'center'` |
-| minWidth | 列最小宽度 | `number \| string` | - |
-| actionColWidth | 操作列宽度 | `number \| string` | `200` |
-| actionButtons | 操作列按钮 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
-| formatColumns | 格式化列配置 | [`TableColumn[]`](#tablecolumn-配置) | `[]` |
-| showPagination | 显示分页 | `boolean` | `false` |
-| paginationProps | 分页属性 | `object` | `{}` |
-| isFrontPage | 前端分页 | `boolean` | `false` |
-| isInitSearch | 初始化加载 | `boolean` | `true` |
-| disabled | 是否禁用 | `boolean` | `false` |
-| reserveSelection | 保留选择 | `boolean` | `false` |
-| selectable | 可选择函数 | `(row, index) => boolean` | - |
-| indexFormatter | 序号列格式化 | `number \| Function` | - |
-
-> ^el^ 表示继承自 [el-table](https://element-plus.org/zh-CN/component/table.html) 的属性
-
-## TableColumn 配置
-
-| 属性 | 说明 | 类型 |
-|------|------|------|
-| prop | 字段名 | `string` |
-| label | 列标题 | `string` |
-| width | 列宽度 | `number \| string` |
-| minWidth | 最小宽度 | `number \| string` |
-| type | 组件类型 | `string` |
-| props | 组件属性 | `object` |
-| render | 自定义渲染 | `({ row, $index }) => VNode` |
-| headerRender | 自定义表头渲染 | `() => VNode` |
-| required | 是否必填 | `boolean \| () => boolean` |
-| disabled | 是否禁用 | `boolean \| (scope) => boolean` |
-| show | 是否显示（支持函数） | `boolean \| () => boolean` |
-| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` |
-| filter | 显示筛选 | `boolean` |
-| editable | 可批量编辑 | `boolean` |
-
-## 在 Form 中使用
-
-```tsx
-const formItemList = [
-  {
-    col: 24,
-    type: 'EpTable',
-    props: {
-      data: formData.detailList,
-      showSelectionCol: true,
-      columns: [
-        { prop: 'itemCode', label: '编号' },
-        { prop: 'itemName', label: '名称' },
-        {
-          prop: 'quantity',
-          label: '数量',
-          type: 'EpInput',
-        },
-      ],
-    },
-  },
-]
-```
-
-## 注意事项
-
-### 在 columns 中使用表单项
-
-在 EpTable 的 columns 中使用表单项时，`type` 不能省略，否则会显示为普通文本。
-
-```json
-// ❌ 错误：表格列中省略 type，会显示为文本
-{ "prop": "quantity", "label": "数量" }
-// ✅ 正确：表格列中必须指定 type
-{ "prop": "quantity", "label": "数量", "type": "EpInput" }
-```
-
-## 自定义渲染
-
-```tsx
-const columns = [
-  {
-    prop: 'status',
-    label: '状态',
-    render: ({ row }) => (
-      <el-tag type={row.status === 1 ? 'success' : 'danger'}>
-        {row.status === 1 ? '启用' : '禁用'}
-      </el-tag>
-    ),
-  },
-]
-```
-
-## Expose 方法
-
-| 方法 | 说明 |
-|------|------|
-| getSelectionRows | 获取选中行 |
-| clearSelection | 清空选择 |
-| search | 重新加载数据 |
+# EpTable 数据表格
+
+基于 el-table 封装，支持配置化列、分页、操作列等功能。
+
+## 基本用法
+
+```vue
+<template>
+  <EpTable
+    :data="tableData"
+    :columns="columns"
+    :action-buttons="actionButtons"
+  />
+</template>
+
+<script setup lang="tsx">
+import { ref } from 'vue'
+
+const tableData = ref([])
+
+const columns = [
+  { prop: 'name', label: '名称' },
+  { prop: 'status', label: '状态' },
+]
+
+const actionButtons = [
+  { name: '编辑', onClick: (row) => {} },
+  { name: '删除', onClick: (row) => {} },
+]
+</script>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| data | 表格数据 ^el^ | `array` | `[]` |
+| columns | 列配置 | [`TableColumn[]`](#tablecolumn-配置) | `[]` |
+| api | 数据接口 | `string \| (reqData) => Promise` | - |
+| method | 请求方法 | `string` | `'post'` |
+| reqData | 请求体数据 | `object` | `{}` |
+| reqParams | URL 参数 | `object` | `{}` |
+| reqBefore | 请求前处理 | `(reqData) => reqData` | - |
+| reqAfter | 响应后处理 | `(res) => data` | - |
+| size | 表格尺寸 ^el^ | `'large' \| 'default' \| 'small'` | `'default'` |
+| border | 是否带边框 ^el^ | `boolean` | `true` |
+| headerCellStyle | 表头样式 ^el^ | `object` | `{ background: '#EEEFF3', fontSize: '14px', color: '#505050' }` |
+| showSelectionCol | 显示多选列 | `boolean` | `false` |
+| showSingleSelectionCol | 显示单选列 | `boolean` | `false` |
+| showIndexCol | 显示序号列 | `boolean` | `true` |
+| align | 对齐方式 | `'left' \| 'center' \| 'right'` | `'center'` |
+| minWidth | 列最小宽度 | `number \| string` | - |
+| actionColWidth | 操作列宽度 | `number \| string` | `200` |
+| actionButtons | 操作列按钮 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
+| formatColumns | 格式化列配置 | [`TableColumn[]`](#tablecolumn-配置) | `[]` |
+| showPagination | 显示分页 | `boolean` | `false` |
+| paginationProps | 分页属性 | `object` | `{}` |
+| isFrontPage | 前端分页 | `boolean` | `false` |
+| isInitSearch | 初始化加载 | `boolean` | `true` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| reserveSelection | 保留选择 | `boolean` | `false` |
+| selectable | 可选择函数 | `(row, index) => boolean` | - |
+| indexFormatter | 序号列格式化 | `number \| Function` | - |
+
+> ^el^ 表示继承自 [el-table](https://element-plus.org/zh-CN/component/table.html) 的属性
+
+## TableColumn 配置
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| prop | 字段名 | `string` |
+| label | 列标题 | `string` |
+| width | 列宽度 | `number \| string` |
+| minWidth | 最小宽度 | `number \| string` |
+| type | 组件类型 | `string` |
+| props | 组件属性 | `object` |
+| render | 自定义渲染 | `({ row, $index }) => VNode` |
+| headerRender | 自定义表头渲染 | `() => VNode` |
+| required | 是否必填 | `boolean \| () => boolean` |
+| disabled | 是否禁用 | `boolean \| (scope) => boolean` |
+| show | 是否显示（支持函数） | `boolean \| () => boolean` |
+| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` |
+| filter | 显示筛选 | `boolean` |
+| editable | 可批量编辑 | `boolean` |
+
+## 在 Form 中使用
+
+```tsx
+const formItemList = [
+  {
+    col: 24,
+    type: 'EpTable',
+    props: {
+      data: formData.detailList,
+      showSelectionCol: true,
+      columns: [
+        { prop: 'itemCode', label: '编号' },
+        { prop: 'itemName', label: '名称' },
+        {
+          prop: 'quantity',
+          label: '数量',
+          type: 'EpInput',
+        },
+      ],
+    },
+  },
+]
+```
+
+## 注意事项
+
+### 在 columns 中使用表单项
+
+在 EpTable 的 columns 中使用表单项时，`type` 不能省略，否则会显示为普通文本。
+
+```json
+// ❌ 错误：表格列中省略 type，会显示为文本
+{ "prop": "quantity", "label": "数量" }
+// ✅ 正确：表格列中必须指定 type
+{ "prop": "quantity", "label": "数量", "type": "EpInput" }
+```
+
+## 自定义渲染
+
+```tsx
+const columns = [
+  {
+    prop: 'status',
+    label: '状态',
+    render: ({ row }) => (
+      <el-tag type={row.status === 1 ? 'success' : 'danger'}>
+        {row.status === 1 ? '启用' : '禁用'}
+      </el-tag>
+    ),
+  },
+]
+```
+
+## Expose 方法
+
+| 方法 | 说明 |
+|------|------|
+| getSelectionRows | 获取选中行 |
+| clearSelection | 清空选择 |
+| search | 重新加载数据 |

package/docs/components/title.md

@@ -1,70 +1,70 @@
-# EpTitle 标题分组
-
-用于表单分组的标题组件，支持右侧按钮和展开折叠。
-
-## 基本用法
-
-```vue
-<template>
-  <EpTitle title="基本信息" />
-</template>
-```
-
-## Props
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| title | 标题文本 | `string` | - |
-| buttons | 右侧按钮列表 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
-| showDownUp | 显示展开折叠 | `boolean` | `false` |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| toggle | 折叠状态切换 | `(expanded: boolean)` |
-
-## 带按钮
-
-```vue
-<template>
-  <EpTitle title="商品明细" :buttons="buttons" />
-</template>
-
-<script setup>
-const buttons = [
-  {
-    name: '新增',
-    type: 'primary',
-    onClick: () => {},
-  },
-  {
-    name: '删除',
-    type: 'danger',
-    plain: true,
-    onClick: () => {},
-  },
-]
-</script>
-```
-
-## 在 Form 中使用
-
-```tsx
-const formItemList = [
-  {
-    col: 24,
-    type: 'EpTitle',
-    props: {
-      title: '基本信息',
-      buttons: [
-        {
-          name: '操作',
-          onClick: () => {},
-        },
-      ],
-    },
-  },
-  // 其他表单项...
-]
-```
+# EpTitle 标题分组
+
+用于表单分组的标题组件，支持右侧按钮和展开折叠。
+
+## 基本用法
+
+```vue
+<template>
+  <EpTitle title="基本信息" />
+</template>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 标题文本 | `string` | - |
+| buttons | 右侧按钮列表 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
+| showDownUp | 显示展开折叠 | `boolean` | `false` |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| toggle | 折叠状态切换 | `(expanded: boolean)` |
+
+## 带按钮
+
+```vue
+<template>
+  <EpTitle title="商品明细" :buttons="buttons" />
+</template>
+
+<script setup>
+const buttons = [
+  {
+    name: '新增',
+    type: 'primary',
+    onClick: () => {},
+  },
+  {
+    name: '删除',
+    type: 'danger',
+    plain: true,
+    onClick: () => {},
+  },
+]
+</script>
+```
+
+## 在 Form 中使用
+
+```tsx
+const formItemList = [
+  {
+    col: 24,
+    type: 'EpTitle',
+    props: {
+      title: '基本信息',
+      buttons: [
+        {
+          name: '操作',
+          onClick: () => {},
+        },
+      ],
+    },
+  },
+  // 其他表单项...
+]
+```

package/docs/components/use-choose-dialog.md

@@ -1,114 +1,114 @@
-# useChooseDialog 选择对话框
-
-基于 useDialog 实现的选择对话框，集成 EpSearchListPage 组件，支持单选和多选。
-
-## 基本用法
-
-```vue
-<template>
-  <el-button @click="handleChoose">选择用户</el-button>
-</template>
-
-<script setup lang="tsx">
-import { useChooseDialog } from 'el-plus'
-
-const ChooseDialog = useChooseDialog({
-  title: '选择用户',
-  multiple: false, // 单选模式
-  dialogProps: {
-    destroyOnClose: true, // 关闭时销毁对话框内容
-  },
-  formItemList: [
-    { prop: 'name', label: '姓名' },
-  ],
-  columns: [
-    { prop: 'name', label: '姓名' },
-    { prop: 'dept', label: '部门' },
-  ],
-  api: getUserList, // 列表接口
-})
-
-const handleChoose = async () => {
-  try {
-    const selection = await ChooseDialog.open()
-    console.log('选中', selection)
-  } catch (e) {
-    console.log('取消')
-  }
-}
-</script>
-```
-
-## Options
-
-| 属性 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| title | 对话框标题 | `string` | - |
-| dialogProps | 对话框属性，继承自 useDialog | `DialogOptions` | - |
-| multiple | 是否多选 | `boolean` | `false` |
-| formItemList | 搜索表单项配置，参考 [EpForm](./form.md) | `FormItemProps[]` | - |
-| columns | 表格列配置，参考 [EpTable](./table.md) | `TableColumn[]` | - |
-| api | 列表数据接口 | `(params) => Promise` | - |
-| formData | 搜索表单数据 | `object` | - |
-| formProps | 表单属性，参考 [EpForm](./form.md) | `FormProps` | `{ col: 3 }` |
-| tableProps | 表格属性，参考 [EpTable](./table.md) | `TableProps` | `{ height: 300 }` |
-
-## 多选模式
-
-```tsx
-const ChooseDialog = useChooseDialog({
-  title: '选择用户',
-  multiple: true, // 多选模式
-  formItemList: [
-    { prop: 'name', label: '姓名' },
-  ],
-  columns: [
-    { prop: 'name', label: '姓名' },
-    { prop: 'dept', label: '部门' },
-  ],
-  api: getUserList,
-})
-```
-
-多选模式下，底部会显示已选数量，确认后返回选中的行数据数组。
-
-## 单选模式
-
-```tsx
-const ChooseDialog = useChooseDialog({
-  title: '选择用户',
-  multiple: false, // 单选模式（默认）
-  columns: [
-    { prop: 'name', label: '姓名' },
-  ],
-  api: getUserList,
-})
-```
-
-单选模式下，点击行即可选中并关闭对话框，返回选中的行数据对象。
-
-## 自定义表格高度
-
-```tsx
-const ChooseDialog = useChooseDialog({
-  title: '选择用户',
-  tableProps: {
-    height: 500, // 自定义表格高度
-  },
-  columns: [...],
-  api: getUserList,
-})
-```
-
-## 返回值
-
-- **单选模式**: 返回选中的行数据对象
-- **多选模式**: 返回选中的行数据数组
-
-## 方法
-
-| 方法 | 说明 | 类型 |
-|------|------|------|
-| open | 打开对话框并返回 Promise | `() => Promise<Selection>` |
-| open | 打开对话框 | `() => void` |
-| close | 关闭对话框 | `() => void` |
+# useChooseDialog 选择对话框
+
+基于 useDialog 实现的选择对话框，集成 EpSearchListPage 组件，支持单选和多选。
+
+## 基本用法
+
+```vue
+<template>
+  <el-button @click="handleChoose">选择用户</el-button>
+</template>
+
+<script setup lang="tsx">
+import { useChooseDialog } from 'el-plus'
+
+const ChooseDialog = useChooseDialog({
+  title: '选择用户',
+  multiple: false, // 单选模式
+  dialogProps: {
+    destroyOnClose: true, // 关闭时销毁对话框内容
+  },
+  formItemList: [
+    { prop: 'name', label: '姓名' },
+  ],
+  columns: [
+    { prop: 'name', label: '姓名' },
+    { prop: 'dept', label: '部门' },
+  ],
+  api: getUserList, // 列表接口
+})
+
+const handleChoose = async () => {
+  try {
+    const selection = await ChooseDialog.open()
+    console.log('选中', selection)
+  } catch (e) {
+    console.log('取消')
+  }
+}
+</script>
+```
+
+## Options
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 对话框标题 | `string` | - |
+| dialogProps | 对话框属性，继承自 useDialog | `DialogOptions` | - |
+| multiple | 是否多选 | `boolean` | `false` |
+| formItemList | 搜索表单项配置，参考 [EpForm](./form.md) | `FormItemProps[]` | - |
+| columns | 表格列配置，参考 [EpTable](./table.md) | `TableColumn[]` | - |
+| api | 列表数据接口 | `(params) => Promise` | - |
+| formData | 搜索表单数据 | `object` | - |
+| formProps | 表单属性，参考 [EpForm](./form.md) | `FormProps` | `{ col: 3 }` |
+| tableProps | 表格属性，参考 [EpTable](./table.md) | `TableProps` | `{ height: 300 }` |
+
+## 多选模式
+
+```tsx
+const ChooseDialog = useChooseDialog({
+  title: '选择用户',
+  multiple: true, // 多选模式
+  formItemList: [
+    { prop: 'name', label: '姓名' },
+  ],
+  columns: [
+    { prop: 'name', label: '姓名' },
+    { prop: 'dept', label: '部门' },
+  ],
+  api: getUserList,
+})
+```
+
+多选模式下，底部会显示已选数量，确认后返回选中的行数据数组。
+
+## 单选模式
+
+```tsx
+const ChooseDialog = useChooseDialog({
+  title: '选择用户',
+  multiple: false, // 单选模式（默认）
+  columns: [
+    { prop: 'name', label: '姓名' },
+  ],
+  api: getUserList,
+})
+```
+
+单选模式下，点击行即可选中并关闭对话框，返回选中的行数据对象。
+
+## 自定义表格高度
+
+```tsx
+const ChooseDialog = useChooseDialog({
+  title: '选择用户',
+  tableProps: {
+    height: 500, // 自定义表格高度
+  },
+  columns: [...],
+  api: getUserList,
+})
+```
+
+## 返回值
+
+- **单选模式**: 返回选中的行数据对象
+- **多选模式**: 返回选中的行数据数组
+
+## 方法
+
+| 方法 | 说明 | 类型 |
+|------|------|------|
+| open | 打开对话框并返回 Promise | `() => Promise<Selection>` |
+| open | 打开对话框 | `() => void` |
+| close | 关闭对话框 | `() => void` |