vue-super-crud 1.7.1 → 1.7.4

package/docs/guide/crud/tableEdit.md

@@ -1,377 +0,0 @@
-# 表格编辑
-
-表格编辑功能允许用户直接在表格中编辑数据，支持行编辑、单元格编辑和自由编辑等多种模式，以及多种触发方式。
-
-## 基础配置
-通过 editConfig 配置表格的编辑模式和触发方式。 </br>
-编辑模式下，默认渲染`input`组件，需要通过包裹一层 `form` 对象才能自定义配置编辑组件。
-
-```js
-options: {
-  editConfig: {
-    // 编辑模式：row(行编辑)、cell(单元格编辑)、free(自由编辑)、dialog(弹窗编辑)
-    mode: 'row',
-    // 触发方式：manual(手动)、click(单击)、dblclick(双击)
-    trigger: 'manual',
-    // 编辑按钮触发
-    edit: true,
-  },
-  renderColumns: [
-    {
-      prop: 'name',
-      label: '姓名',
-      form: { // 自定义编辑组件配置
-        comp: {
-          name: 'el-select',
-          options: [
-            {
-              label: '选项1',
-              value: '选项1',
-            }
-          ]
-        },
-      }
-    }
-  ]
-}
-```
-
-
-## 自由编辑
-
-### 全局自由编辑
-
-`mode: free` 自由编辑 </br>
-自由编辑模式下，所有可编辑的单元格始终处于编辑状态。
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-free slot="source"></crud-tableEdit-free>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/free.vue
-</common-code-format>
-</ClientOnly>
-
-### 单列自由编辑
-
-`isEdit` 设置单列自由编辑 </br>
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-freeColumn slot="source"></crud-tableEdit-freeColumn>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/freeColumn.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 行编辑
-
-### 手动触发 - 操作列
-
-通过操作列编辑按钮 `edit`触发编辑状态。
-
-```js
-editConfig: {
-  mode: "row",
-  trigger: "manual",
-  edit: {} // 操作列按钮配置
-}
-```
-
-#### 事件处理
-
-`@edit(done, scope)` 点击编辑触发，参数`done(params)`，可设置编辑后的行数据 </br>
-`@save(done, scope, unLoading)` 点击保存触发，参数`done(params)`，可设置保存后的行数据 </br>
-`@cancel(done, scope)` 点击取消触发 </br>
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-rowAction slot="source"></crud-tableEdit-rowAction>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/rowAction.vue
-</common-code-format>
-</ClientOnly>
-
-### 手动触发 - 批量编辑
-
-通过批量编辑按钮 `batch` 触发编辑状态。
-
-```js
-editConfig: {
-  mode: "row",
-  trigger: "manual",
-  batch: {
-    isSelect: true, // 是否批量编辑选中项，搭配selection使用
-  } // 批量操作按钮配置
-}
-```
-
-#### 事件处理
-
-`@batchEdit(done, rows)` 点击批量编辑触发，参数`done(rows)`，可传递需要编辑的行，默认编辑所有行 </br>
-`@batchSave(done, rows)` 点击批量保存触发，参数`done(rows)`，可传递需要保存的行，默认保存所有编辑行 </br>
-`@batchCancel(done, rows)` 点击批量取消触发，参数`done(rows)`，可传递需要取消的行，默认取消所有编辑行 </br>
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-rowBatch slot="source"></crud-tableEdit-rowBatch>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/rowBatch.vue
-</common-code-format>
-</ClientOnly>
-
-### 手动触发 - 调用方法
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-methods slot="source"></crud-tableEdit-methods>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/methods.vue
-</common-code-format>
-</ClientOnly>
-
-
-### 单击触发
-
-点击行时触发编辑状态。
-
-```js
-editConfig: {
-  mode: "row",
-  trigger: "click",
-}
-```
-
-#### 事件处理
-
-`@edit(done, scope)` 点击编辑触发，参数`done(params)`，可设置编辑后的行数据 </br>
-`@save(done, scope, unLoading)` 点击保存触发，参数`done(params)`，可设置保存后的行数据 </br>
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-rowClick slot="source"></crud-tableEdit-rowClick>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/rowClick.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 单元格编辑
-
-单元格编辑模式下，点击或双击单元格时，只有该单元格进入编辑状态
-
-```js
-editConfig: {
-  mode: "cell",
-}
-```
-
-#### 事件处理
-
-`@edit(done, scope, column)` 点击编辑触发，参数`done(params)`，可设置编辑后的数据 </br>
-`@save(done, value, scope, column, unLoading)` 点击保存触发，参数`done(params)`，可设置保存后的数据 </br>
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-cellEdit slot="source"></crud-tableEdit-cellEdit>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/cellEdit.vue
-</common-code-format>
-</ClientOnly>
-
-## 控制编辑状态
-
-`isRowEdit` 控制行编辑状态 </br>
-`isEdit` 控制列与单元格编辑状态
-
-```js
-options: {
-  editConfig: {
-    isRowEdit: (row) => { //控制行编辑状态
-      return row.id % 2 === 0;
-    }
-  }
-  renderColumns: [
-    {
-      prop: 'name',
-      label: '姓名',
-      isEdit: (row) => { //控制单元格编辑状态
-        return row.id % 2 === 0;
-      }
-    }
-  ]
-}
-```
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-controlEdit slot="source"></crud-tableEdit-controlEdit>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/controlEdit.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 新增删除操作
-
-### 基本配置
-
-```js
-editConfig: {
-  mode: 'row',
-  trigger: 'manual',
-  rowEdit: {
-    hasPermi: ['xx'] // 可以用于设置按钮权限等
-  },
-  // 底部新增行按钮配置
-  lastAdd: {
-    type: 'last', // first(第一行新增)、last(最后一行新增)
-  },
-  // 新增行按钮配置
-  rowAdd: {
-    type: 'first', // first(第一行新增)、last(最后一行新增)
-  },
-  // 批量删除按钮配置
-  batchDelete: {
-    confirm: (rows) => `是否删除序号为${rows.map(row => row.$index + 1).join(',')}的数据？`, // 删除提示
-  },
-  // 删除按钮配置
-  delete: {
-    confirm: (scope) => `是否删除序号为${scope.$index + 1}的数据？`, // 删除提示
-  },
-},
-```
-
-### 事件处理
-
-`@add` 点击新增触发，参数`done(params)`，可设置新增的行数据 </br>
-`@delete` 点击删除触发 </br>
-`@batchDelete` 点击批量删除触发 </br>
-
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-addDeleteBtn slot="source"></crud-tableEdit-addDeleteBtn>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/addDeleteBtn.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 弹窗编辑
-
-### 基本配置
-
-```js
-options: {
-  editConfig: {
-    mode: 'dialog',
-    // 编辑按钮配置
-    edit: {},
-    // 新增按钮配置
-    add: {
-      type: 'first', // first(第一行新增)、last(最后一行新增)
-    },
-    // 查看按钮配置
-    view: {},
-  },
-  dialog: {}, // 自定义弹窗配置
-  formOptions: {}, // 自定义表单配置
-}
-```
-
-### 事件处理
-
-`@add` 点击新增触发 </br>
-`@edit` 点击编辑触发 </br>
-`@save` 点击保存触发 </br>
-`@view` 点击查看触发 </br>
-
-<ClientOnly>
-<common-code-format>
-  <crud-tableEdit-dialog slot="source"></crud-tableEdit-dialog>
-  
-<<< @/docs/.vuepress/components/crud/tableEdit/dialog.vue
-</common-code-format>
-</ClientOnly>
-
-
-## API
-
-### editConfig 配置
-
-| 参数        | 说明                             | 类型                    | 可选值                |
-| ----------- | -------------------------------- | ----------------------- | --------------------- |
-| mode        | 编辑模式                         | string                  | free,cell,row,dialog  |
-| trigger     | 触发方式                         | string                  | manual,click,dblclick |
-| edit        | 编辑按钮配置                     | object                  | -                     |
-| batch       | 批量操作按钮配置，仅限`row`模式  | object                  | -                     |
-| add         | 新增按钮配置                     | object                  | -                     |
-| lastAdd     | 底部新增行按钮配置               | object                  | -                     |
-| batchDelete | 批量删除按钮配置                 | object                  | -                     |
-| delete      | 删除按钮配置                     | object                  | -                     |
-| view        | 查看按钮配置，仅限`dialog`模式   | object                  | -                     |
-| isRowEdit   | 控制行是否可编辑                 | function({row, $index}) | -                     |
-| autofocus   | 是否自动聚焦，支持字符串(prop)   | boolean/string          | true                  |
-| exclusive   | 行编辑是否互斥(同时只能编辑一行) | boolean                 | false                 |
-
-### Column 配置
-
-| 参数              | 说明                 | 类型                            | 默认值            |
-| ----------------- | -------------------- | ------------------------------- | ----------------- |
-| isEdit            | 是否可编辑           | boolean/function({row, $index}) | false             |
-| add               | 仅自定义新增组件     | boolean/Object                  | 默认继承form配置  |
-| edit              | 仅自定义编辑组件     | boolean/Object                  | 默认继承form配置  |
-| form              | 自定义编辑、新增组件 | boolean/Object                  | -                 |
-| form.prop         | 编辑字段             | boolean/Object                  | 默认继承列的prop  |
-| form.comp         | 编辑组件             | object                          | el-input          |
-| form.render       | 编辑组件渲染函数     | function                        | -                 |
-| form.validateProp | 编辑组件验证字段     | string                          | 默认继承form.prop |
-
-### slots
-
-| 插槽名        | 说明                 | 默认值       |
-| ------------- | -------------------- | ------------ |
-| `{prop}-form` | 自定义编辑、新增组件 | -            |
-| `{prop}-add`  | 仅自定义新增组件     | 默认继承form |
-| `{prop}-edit` | 仅自定义编辑组件     | 默认继承form |
-
-
-### Events
-
-
-| 事件名            | 说明                              | 参数                            |
-| ----------------- | --------------------------------- | ------------------------------- |
-| @add              | 点击新增按钮时                    | done(params), scope             |
-| @edit             | 点击编辑按钮时                    | done(params), scope             |
-| @save             | 点击保存按钮时                    | done(params), scope, unLoading  |
-| @cancel           | 点击取消按钮时                    | done(params), scope             |
-| @delete           | 点击删除按钮时                    | done, scope, unLoading          |
-| @view             | 点击查看按钮时，仅限`dialog`模式  | done, scope                     |
-| @batchEdit        | 点击批量编辑按钮时，仅限`row`模式 | done(rows), rows                |
-| @batchSave        | 点击批量保存按钮时，仅限`row`模式 | done(rows), rows, unLoading     |
-| @batchCancel      | 点击批量取消按钮时，仅限`row`模式 | done(rows)                      |
-| @batchDelete      | 点击批量删除按钮时，仅限`row`模式 | done, rows, unLoading           |
-| @editStatusChange | 编辑状态变化时触发                | {mode, rowKey, row, prop, type} |
-
-### Methods
-
-| 方法名         | 说明                                     | 参数                                                        | 返回值 |
-| -------------- | ---------------------------------------- | ----------------------------------------------------------- | ------ |
-| setRowEdit     | 设置行编辑状态                           | (rows: object/array, options: {type: string, prop: string}) | -      |
-| setBatchEdit   | 批量设置行编辑状态，不传rows则设置所有行 | (type: string, rows: object/array)                          | -      |
-| setCellEdit    | 设置单元格编辑状态                       | (row: object, prop: string)                                 | -      |
-| addRow         | 新增表格行                               | (params: object, type: first/last)                          | -      |
-| clearAllEdit   | 清除所有编辑状态                         | -                                                           | -      |
-| getEditingRows | 获取所有编辑状态的行                     | -                                                           | array  |
-
-### options 快捷配置
-
-| 参数         | 说明                    | 类型                    | 默认值 |
-| ------------ | ----------------------- | ----------------------- | ------ |
-| freeEdit     | 启用自由编辑模式        | boolean                 | false  |
-| cellEdit     | 启用单元格编辑模式      | boolean                 | false  |
-| rowEdit      | 启用行编辑模式          | boolean                 | false  |
-| batchEdit    | 启用批量编辑模式        | boolean                 | false  |
-| batchRowEdit | 启用行编辑+批量编辑模式 | boolean                 | false  |
-| isRowEdit    | 控制行是否可编辑的函数  | function({row, $index}) | -      |

package/docs/guide/crud/validate.md

@@ -1,158 +0,0 @@
-# 表格校验
-
-表格组件支持表单校验功能,包括必填校验、正则校验和自定义校验规则。同时提供了错误提示和错误状态管理。
-
-## 基础用法
-
-通过配置列的 `required` 属性来启用必填校验。支持布尔值和对象两种配置方式:
-
-```js
-renderColumns: [
-  {
-    prop: "name",
-    label: "姓名", 
-    required: true // 简单配置
-  },
-  {
-    prop: "age",
-    label: "年龄",
-    required: { // 详细配置 
-      message: "年龄不能为空",
-      trigger: "blur"
-    }
-  }
-]
-```
-
-<ClientOnly>
-<common-code-format>
-  <crud-validate-base slot="source"></crud-validate-base>
-  
-<<< @/docs/.vuepress/components/crud/validate/base.vue
-</common-code-format>
-</ClientOnly>
-
-## 正则校验
-
-通过配置列的 `rules` 属性来添加正则校验规则。支持内置正则模板和自定义正则对象:
-
-```js
-renderColumns: [
-  {
-    prop: "phone",
-    label: "手机号",
-    rules: ["integer"] // 使用内置正则或预设规则
-  },
-  {
-    prop: "email", 
-    label: "邮箱",
-    rules: [{ // 自定义正则
-      regular: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-      message: "请输入正确的邮箱格式"
-    }]
-  }
-]
-```
-
-<ClientOnly>
-<common-code-format>
-  <crud-validate-regulars slot="source"></crud-validate-regulars>
-  
-<<< @/docs/.vuepress/components/crud/validate/regulars.vue
-</common-code-format>
-</ClientOnly>
-
-## 自定义校验
-
-通过配置 `rules` 的 validator 函数来自定义校验规则。支持获取 `scope` 参数:
-
-```js
-renderColumns: [
-  {
-    prop: "age",
-    label: "年龄", 
-    rules: [{
-      validator: (rule, value, callback, scope) => {
-        if (value < 18) {
-          callback(new Error("年龄不能小于18岁"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "change"
-    }]
-  },
-  {
-    prop: "age",
-    label: "年龄", 
-    rules: (scope)=>[{
-      validator: (rule, value, callback) => {
-        if (value < 18) {
-          callback(new Error("年龄不能小于18岁"));
-        } else {
-          callback();
-        }
-      },
-      trigger: "change"
-    }]
-  }
-]
-```
-
-<ClientOnly>
-<common-code-format>
-  <crud-validate-custom slot="source"></crud-validate-custom>
-  
-<<< @/docs/.vuepress/components/crud/validate/custom.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 树级校验
-
-<ClientOnly>
-<common-code-format>
-  <crud-validate-tree slot="source"></crud-validate-tree>
-  
-<<< @/docs/.vuepress/components/crud/validate/tree.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 联动校验
-
-通过方法 `validateField` 函数来精确控制每个校验单元格。
-
-<ClientOnly>
-<common-code-format>
-  <crud-validate-relation slot="source"></crud-validate-relation>
-  
-<<< @/docs/.vuepress/components/crud/validate/relation.vue
-</common-code-format>
-</ClientOnly>
-
-## API
-
-### Column 配置
-
-| 参数     | 说明     | 类型                         | 默认值 |
-| -------- | -------- | ---------------------------- | ------ |
-| required | 是否必填 | boolean/object               | false  |
-| rules    | 校验规则 | string/array/function(scope) | -      |
-
-### 实例方法
-
-| 方法名        | 说明         | 参数                          | 返回值  |
-| ------------- | ------------ | ----------------------------- | ------- |
-| validate      | 校验整个表格 | callback(可选)                | Promise |
-| validateField | 校验指定行   | options: {index/id/row, prop} | Promise |
-| clearValidate | 清除校验     | -                             | -       |
-
-### validateField Options
-
-| 参数  | 说明         | 类型          |
-| ----- | ------------ | ------------- |
-| index | 行索引       | number        |
-| id    | 行ID         | string/number |
-| row   | 行数据对象   | object        |
-| prop  | 校验的字段名 | string        |

package/docs/guide/dialog/baseUse.md

@@ -1,81 +0,0 @@
-# 基本使用
-
-## 基本使用
-
-`title` 标题、`width` 宽度 。详情参考element-ui弹窗组件配置[element-ui](https://element.eleme.cn/#/zh-CN/component/dialog)  </br>
-`show()` 打开弹窗 </br>
-弹窗渲染方式依旧为通用的 `render函数`，`component配置`</br>
-
-<ClientOnly>
-<common-code-format>
-  <dialog-baseUse-base slot="source"></dialog-baseUse-base>
-  
-<<< @/docs/.vuepress/components/dialog/baseUse/base.vue
-</common-code-format>
-</ClientOnly>
-
-## 通过实例控制弹窗
-
-`hide()` 手动关闭弹窗 </br>
-`loading` 控制loading
-
-<ClientOnly>
-<common-code-format>
-  <dialog-baseUse-control slot="source"></dialog-baseUse-control>
-  
-<<< @/docs/.vuepress/components/dialog/baseUse/control.vue
-</common-code-format>
-</ClientOnly>
-
-<!-- ## v-insertSlot插入插槽渲染弹窗
-
-`v-insertSlot` 获取模板，插入弹窗实例</br>
-
-<ClientOnly>
-<common-code-format>
-  <dialog-baseUse-insertSlot slot="source"></dialog-baseUse-insertSlot>
-  
-<<< @/docs/.vuepress/components/dialog/baseUse/insertSlot.vue
-</common-code-format>
-</ClientOnly> -->
-
-
-## 确认，取消关闭前方法
-
-`confirm` 确认之前、`cancel` 取消之前</br>
-
-<ClientOnly>
-<common-code-format>
-  <dialog-baseUse-beforeConfirm slot="source"></dialog-baseUse-beforeConfirm>
-  
-<<< @/docs/.vuepress/components/dialog/baseUse/beforeConfirm.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 自定义底部按钮
-
-`footer` 自定义底部按钮</br>
-`footer.align` 底部对齐方式</br>
-`footer` 为`false`时或 `footer.hidden` 为`true` 隐藏底部
-
-<ClientOnly>
-<common-code-format>
-  <dialog-baseUse-footer slot="source"></dialog-baseUse-footer>
-  
-<<< @/docs/.vuepress/components/dialog/baseUse/footer.vue
-</common-code-format>
-</ClientOnly>
-
-
-## 抽屉式弹窗
-
-`drawer` 抽屉式弹窗, 详情参考element-ui抽屉组件配置[element-ui](https://element.eleme.cn/#/zh-CN/component/drawer)
-
-<ClientOnly>
-<common-code-format>
-  <dialog-baseUse-drawer slot="source"></dialog-baseUse-drawer>
-  
-<<< @/docs/.vuepress/components/dialog/baseUse/drawer.vue
-</common-code-format>
-</ClientOnly>