vue-super-crud 1.7.1

package/docs/guide/crud/search.md

@@ -0,0 +1,150 @@
+# 搜索
+
+搜索功能支持表单搜索和表头搜索两种方式，并可配置本地搜索或远程搜索。
+
+## 基础用法
+
+通过配置列的 `search` 属性启用搜索功能。支持表单搜索和表头搜索两种方式。</br>
+使用 `search.sync` 可以双向绑定搜索参数对象。
+
+<ClientOnly>
+<common-code-format>
+  <crud-search-base slot="source"></crud-search-base>
+  
+<<< @/docs/.vuepress/components/crud/search/base.vue
+</common-code-format>
+</ClientOnly>
+
+## 自定义搜索组件
+
+支持插槽自定义搜索组件、搜索标题</br>
+支持自定义搜索表单、搜索头配置。
+
+<ClientOnly>
+<common-code-format>
+  <crud-search-special slot="source"></crud-search-special>
+
+<<< @/docs/.vuepress/components/crud/search/special.vue
+</common-code-format>
+</ClientOnly>
+
+### 搜索表单配置
+
+通过 `searchForm` 可以自定义搜索表单的配置。
+
+```js
+searchForm: {
+  initShow: true,  // 初始展开
+  columnWidth: "200px",  // 列宽
+  labelWidth: "100px",  // 标签宽度
+  action: {
+    search: {
+      text: "查询"  // 自定义按钮文本
+    },
+    reset: {
+      text: "重置"
+    }
+  }
+}
+```
+
+### 表头搜索
+
+通过 `searchHeader` 配置表头搜索的行为：
+
+```js
+options: {
+  searchHeader: {
+    placement: "bottom", // 弹出位置
+    width: "290px"      // 搜索框宽度
+  }
+}
+```
+
+## 本地搜索
+
+通过配置 `localSearch: true` 启用本地搜索功能，可直接对表格数据进行筛选，无需发送请求。</br>
+启用本地搜索时，可以搭配本地分页使用 `localPagination: true`。
+</br>
+支持输入框搜索、下拉选择搜索、日期搜索、自定义搜索过滤。</br>
+search组件使用插槽或者函数自定义时，需要指定`search.type`。
+
+<ClientOnly>
+<common-code-format>
+  <crud-search-localSearch slot="source"></crud-search-localSearch>
+
+<<< @/docs/.vuepress/components/crud/search/localSearch.vue
+</common-code-format>
+</ClientOnly>
+
+### 本地搜索指定搜索类型
+```js
+{
+  prop: "date",
+  label: "日期",
+  search: {
+    type: "date" // 本地搜索类型
+  }
+}
+  ```
+
+### 本地搜索自定义搜索过滤
+```js
+{
+  prop: "custom",
+  label: "自定义",
+  search: {
+    filter: (cellValue, searchValue, row) => {
+      // 返回 true 表示匹配，false 表示不匹配
+      return customFilter(cellValue, searchValue, row);
+    }
+  }
+}
+```
+
+## API
+
+### Column 配置
+
+| 参数                   | 说明                                                                                                          | 类型           | 默认值              |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------- | -------------- | ------------------- |
+| search                 | 是否启用搜索                                                                                                  | boolean/object | false               |
+| search.prop            | 搜索字段                                                                                                      | object         | 默认继承列的prop    |
+| search.validateProp    | 搜索验证字段、用于验证表头是否为空                                                                            | string         | 默认继承search.prop |
+| search.label           | 搜索标签                                                                                                      | string         | 默认继承列的label   |
+| search.labelRender     | 搜索标签渲染函数                                                                                              | function       | -                   |
+| search.reset           | 单个重置事件                                                                                                  | function       | -                   |
+| search.comp            | 搜索组件                                                                                                      | object         | el-input            |
+| search.render          | 搜索组件渲染函数                                                                                              | function       | -                   |
+| search.type            | 本地搜索类型，支持input、select、date                                                                         | string         | input               |
+| search.filter          | 本地搜索过滤函数                                                                                              | function       | -                   |
+| searchHeader           | 是否启用表头搜索， [可配置el-popover组件属性](https://element.eleme.cn/2.15/#/zh-CN/component/popover#events) | boolean/object | 默认继承search      |
+| searchHeader.width     | 表头搜索宽度                                                                                                  | string         | 290px               |
+| searchHeader.searchBtn | 是否显示表头搜索按钮                                                                                          | boolean        | false               |
+| searchHeader.resetBtn  | 是否显示表头重置按钮                                                                                          | boolean        | true                |
+| searchHeader.comp      | 表头搜索组件                                                                                                  | object         | 默认继承search      |
+| searchHeader.render    | 表头搜索组件渲染函数                                                                                          | function       | 默认继承search      |
+
+### Options 配置
+
+| 参数         | 说明               | 类型    | 默认值 |
+| ------------ | ------------------ | ------- | ------ |
+| expandSearch | 初始是否展开搜索框 | boolean | false  |
+| localSearch  | 是否启用本地搜索   | boolean | false  |
+| searchForm   | 搜索表单配置       | object  | -      |
+| searchHeader | 表头搜索配置       | object  | -      |
+
+### Events
+
+| 事件名 | 说明     | 参数       |
+| ------ | -------- | ---------- |
+| search | 搜索事件 | searchData |
+| reset  | 重置事件 | -          |
+
+### slots
+
+| 插槽名                | 说明                 | 默认值         |
+| --------------------- | -------------------- | -------------- |
+| `{prop}-search`       | 自定义列搜索组件     | -              |
+| `{prop}-search-label` | 自定义列搜索标签     | -              |
+| `{prop}-searchHeader` | 自定义列表头搜索内容 | 默认继承search |

package/docs/guide/crud/selection.md

@@ -0,0 +1,73 @@
+# 表格选中
+
+## 概述
+
+表格选中分为单选和多选，通过 `selected` 响应式绑定选中数据。
+
+
+## 跨分页选中
+
+`selected` 绑定响应式选中数据，存在数据时会自动选中 </br>
+`selection` 开启表格多选选中 </br>
+`selection.reserveSelection` 开启数据更新时保持选中状态 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-selection-pagination slot="source"></crud-selection-pagination>
+  
+<<< @/docs/.vuepress/components/crud/selection/pagination.vue
+</common-code-format>
+</ClientOnly> 
+
+## 选中事件
+
+`@selection-change` 选中项发生变化时触发 </br>
+`@select` 用户手动选择/取消选择某一行时触发 </br>
+`@select-all` 用户手动选择/取消选择所有行时触发
+
+<ClientOnly>
+<common-code-format>
+  <crud-selection-events slot="source"></crud-selection-events>
+  
+<<< @/docs/.vuepress/components/crud/selection/events.vue
+</common-code-format>
+</ClientOnly>
+
+
+## 单选
+
+`selected` 绑定响应式选中数据，存在数据时会自动选中 </br>
+`singleSelection` 开启单选模式 </br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-selection-singleSelection slot="source"></crud-selection-singleSelection>
+  
+<<< @/docs/.vuepress/components/crud/selection/singleSelection.vue
+</common-code-format>
+</ClientOnly> 
+
+
+## selection 配置项
+
+| 参数             | 说明                      | 类型                 | 可选值 | 默认值 |
+| ---------------- | ------------------------- | -------------------- | ------ | ------ |
+| reserveSelection | 是否启用分页选中          | boolean              | -      | false  |
+| selectable       | 是否可以勾选              | Function(row, index) | -      | -      |
+| banner           | 是否显示选中项横幅        | boolean              | -      | false  |
+| ctrlSelect       | 是否启用 Ctrl 键点击选中  | boolean              | -      | true   |
+| shiftSelect      | 是否启用 Shift 键批量选中 | boolean              | -      | true   |
+| maxDisplay       | 直接显示的最大数量        | number               | -      | 3      |
+| labelKey         | 显示的字段名              | string               | -      | 'id'   |
+| clear            | 是否显示清除按钮          | boolean              | -      | true   |
+
+
+## singleSelection 配置项
+
+| 参数       | 说明                     | 类型                 | 可选值 | 默认值 |
+| ---------- | ------------------------ | -------------------- | ------ | ------ |
+| selectable | 是否可以勾选             | Function(row, index) | -      | -      |
+| banner     | 是否显示选中项横幅       | boolean              | -      | false  |
+| ctrlSelect | 是否启用 Ctrl 键点击选中 | boolean              | -      | true   |
+| labelKey   | 显示的字段名             | string               | -      | 'id'   |
+| clear      | 是否显示清除按钮         | boolean              | -      | true   |

package/docs/guide/crud/span.md

@@ -0,0 +1,98 @@
+# 表格合并
+
+表格支持按照指定字段对行进行合并，支持多字段优先级合并。并根据配置的合并字段，自动使用多级排序。
+
+## 基础用法
+
+通过配置合并字段 `spanProp` 启用列的合并功能。自动合并`相同字段值`的行。</br>
+特殊列也可以启用合并功能，`index` 列可以获取合并后的索引。
+
+<ClientOnly>
+<common-code-format>
+  <crud-span-base slot="source"></crud-span-base>
+  
+<<< @/docs/.vuepress/components/crud/span/base.vue
+</common-code-format>
+</ClientOnly>
+
+## 特殊列处理
+
+索引列配置`spanProp`，可以获取合并后的索引。</br>
+选中列配置`spanProp`，可以操作合并后的选中数据，实际选中还是合并前的数据。</br>
+
+<ClientOnly>
+<common-code-format>
+  <crud-span-special slot="source"></crud-span-special>
+
+  <<< @/docs/.vuepress/components/crud/span/special.vue
+</common-code-format>
+</ClientOnly>
+
+## 列级别自定义
+
+通过 `spanMethod` 属性可以自定义某一列的合并规则。
+
+```js
+renderColumns: [
+  {
+    prop: "status",
+    label: "状态",
+    // 自定义合并规则
+    spanMethod: ({ row, rowIndex }) => {
+      if (row.status === "pending") {
+        return {
+          rowspan: 2,
+          colspan: 1,
+        };
+      }
+      return {
+        rowspan: 1,
+        colspan: 1,
+      };
+    },
+  },
+];
+```
+
+## 表格级别自定义
+
+通过 `spanMethod` 可以自定义整个表格的合并规则。
+
+```js
+spanMethod: ({ row, column, rowIndex, columnIndex }) => {
+  if (row.status === "pending") {
+    return {
+      rowspan: 2,
+      colspan: 1,
+    };
+  }
+  return {
+    rowspan: 1,
+    colspan: 1,
+  };
+};
+```
+
+## API
+
+### Column 配置
+
+| 参数       | 说明                 | 类型           | 默认值 |
+| ---------- | -------------------- | -------------- | ------ |
+| spanProp   | 是否启用列合并       | boolean/string | false  |
+| spanMethod | 列级别自定义合并方法 | Function       | -      |
+
+### Options 配置
+
+| 参数       | 说明                   | 类型     | 默认值 |
+| ---------- | ---------------------- | -------- | ------ |
+| spanMethod | 表格级别自定义合并方法 | Function | -      |
+
+### spanMethod 参数
+
+| 参数        | 说明   | 类型   |
+| ----------- | ------ | ------ |
+| row         | 行数据 | object |
+| column      | 列配置 | object |
+| rowIndex    | 行索引 | number |
+| columnIndex | 列索引 | number |

package/docs/guide/crud/summary.md

@@ -0,0 +1,167 @@
+# 表格统计
+
+表格支持在底部显示统计信息，内置多种统计方式，也支持自定义统计逻辑。
+
+## 基础用法
+
+通过配置列的 `summary` 属性启用统计功能。支持以下统计方式：
+- `sum`: 求和
+- `avg`: 平均值
+- `max`: 最大值
+- `min`: 最小值
+- `count`: 计数
+
+<ClientOnly>
+<common-code-format>
+  <crud-summary-base slot="source"></crud-summary-base>
+  
+<<< @/docs/.vuepress/components/crud/summary/base.vue
+</common-code-format>
+</ClientOnly>
+
+## 格式化配置
+
+通过 `prefix`、`suffix` 和 `decimals` 属性可以对统计结果进行格式化：
+
+```js
+renderColumns: [
+  {
+    prop: "amount",
+    label: "金额",
+    summary: {
+      type: "sum",
+      prefix: "¥",     // 添加前缀
+      suffix: "元",    // 添加后缀
+      decimals: 2      // 保留2位小数
+    }
+  }
+]
+```
+
+## 高级统计
+
+### 加权平均值
+```js
+{
+  prop: "score",
+  label: "加权平均分",
+  summary: {
+    type: "avg",
+    decimals: 1,
+    suffix: "分"
+  }
+}
+```
+
+### 条件统计
+```js
+{
+  prop: "status",
+  label: "状态统计",
+  summary: {
+    type: "count",
+    predicate: value => value === 'active',  // 只统计active状态
+    suffix: "个"
+  }
+}
+```
+
+## 自定义统计方法
+
+通过传入函数作为 `method` 可以自定义统计逻辑：
+
+```js
+{
+  prop: "custom",
+  label: "自定义统计",
+  summary: {
+    type: "custom",
+    method: (values, data) => {
+      // values: 当前列的所有数值
+      // data: 表格完整数据
+      return values.reduce((sum, val) => sum + val, 0);
+    },
+    prefix: "¥",
+    decimals: 2
+  }
+}
+```
+
+## 表格级别自定义
+
+通过 `summaryMethod` 可以自定义整个表格的统计规则：
+
+```js
+options: {
+  summaryMethod: ({ columns, data }) => {
+    const sums = [];
+    columns.forEach((column, index) => {
+      if (index === 0) {
+        sums[index] = '总计';
+        return;
+      }
+      const values = data.map(item => Number(item[column.property]));
+      sums[index] = values.reduce((sum, val) => sum + val, 0);
+    });
+    return sums;
+  }
+}
+```
+
+## 嵌套数据统计
+
+通过 `path` 属性可以统计嵌套对象中的数据：
+
+```js
+{
+  prop: "nested.value",
+  label: "嵌套数据",
+  summary: {
+    type: "sum",
+    path: "nested.value",  // 指定数据路径
+    decimals: 2
+  }
+}
+```
+
+## API
+
+### Column Summary 配置
+
+| 参数       | 说明                           | 类型     | 默认值 |
+| ---------- | ------------------------------ | -------- | ------ |
+| type       | 统计类型                       | string   | -      |
+| prefix     | 统计值前缀                     | string   | ''     |
+| suffix     | 统计值后缀                     | string   | ''     |
+| decimals   | 小数位数                       | number   | 2      |
+| path       | 数据路径（用于嵌套数据）       | string   | -      |
+| ignoreZero | 是否忽略0值                    | boolean  | false  |
+| absolute   | 是否取绝对值                   | boolean  | false  |
+| predicate  | 计数条件（仅用于count）        | function | -      |
+| method     | 自定义统计方法（仅用于custom） | function | -      |
+
+### Options 配置
+
+| 参数          | 说明                                         | 类型     | 默认值 |
+| ------------- | -------------------------------------------- | -------- | ------ |
+| summaryData   | 不使用表格data数据，而使用外部传入的统计数据 | array    | -      |
+| showSummary   | 是否显示统计行                               | boolean  | false  |
+| summaryMethod | 自定义统计方法                               | function | -      |
+
+### 内置统计类型
+
+| 类型   | 说明       | 可选值                |
+| ------ | ---------- | --------------------- |
+| sum    | 求和       | ignoreZero, absolute  |
+| avg    | 平均值     | ignoreZero            |
+| count  | 计数       | ignoreZero, predicate |
+| max    | 最大值     | absolute              |
+| min    | 最小值     | absolute              |
+| custom | 自定义方法 | method                |
+
+### summaryMethod 参数
+
+| 参数    | 说明       | 类型  |
+| ------- | ---------- | ----- |
+| columns | 列配置数组 | array |
+| data    | 表格数据   | array |