docs: 增加列设置文档

2025-09-19 01:58:01 +08:00 · 2025-05-07 20:30:31 +08:00
parent f7bd7e22b4
commit ce01dca5c3
4 changed files with 126 additions and 15 deletions
--- a/newdocs/docs/.vuepress/notes.ts
+++ b/newdocs/docs/.vuepress/notes.ts
@@ -1,7 +1,7 @@
 /*
 * @Author: yubaolee <yubaolee@163.com> | ahfu~ <954478625@qq.com>
 * @Date: 2025-04-23 20:26:48
- * @LastEditTime: 2025-05-07 19:13:26
+ * @LastEditTime: 2025-05-07 20:18:08
 * @Description: 笔记配置
 * Copyright (c) 2025 by yubaolee | ahfu~ , All Rights Reserved.  
 */
@@ -59,7 +59,7 @@ const proNote = defineNoteConfig({
    {
      text: '内置组件',
      collapsed: false,
-      items: ['components','querybuilder']
+      items: ['table','querybuilder','columnsettings','components']
    },
    'printerplan',
    {
--- a/newdocs/docs/notes/pro/components.md
+++ b/newdocs/docs/notes/pro/components.md
@@ -1,5 +1,5 @@
 ---
-title: 内置组件
+title: 其他组件
 createTime: 2025/04/23 23:43:26
 permalink: /pro/components/
 ---
@@ -40,17 +40,6 @@ default-props: 数据源提供的数据类型。默认情况下为id/name的数
 ]
 ```

-## 表格组件 auth-table
-
-用于渲染给定列定义，给定数据的表格，简单用法如下：
-```html
-<auth-table ref="tableName" :table-fields="tableFields" :data="dataList" ></auth-table>
-```
-
-支持的事件：row-click selection-change
-
-支持的方法：exportExcel clearSelection
-
 ## 表单组件 auth-form

 根据定义动态渲染表单项，减少表单的开发。用法如下:
--- a/newdocs/docs/notes/pro/querybuilder.md
+++ b/newdocs/docs/notes/pro/querybuilder.md
@@ -6,7 +6,7 @@ permalink: /pro/querybuilder/

 ## 组件简介

-自定义查询组件是一个可复用的高级查询条件构建器组件，支持通过配置 columns 自动生成 SQL 查询条件。适用于表格、列表等需要复杂筛选的场景，支持条件的增删、类型自动识别、SQL 片段生成与复制、条件本地缓存等功能。
+自定义查询组件是一个可复用的高级查询条件构建器组件，支持通过配置 columns 自动生成 SQL 查询条件。用于配合框架el-table及[通用表格组件](./table.md)的复杂筛选的场景，支持条件的增删、类型自动识别、SQL 片段生成与复制、条件本地缓存等功能。

 ![2025-05-07-19-20-48](http://img.openauth.net.cn/2025-05-07-19-20-48.png)

--- a/newdocs/docs/notes/pro/table.md
+++ b/newdocs/docs/notes/pro/table.md
@@ -0,0 +1,122 @@
+---
+title: 通用表格
+createTime: 2025/05/07 19:10:57
+permalink: /pro/table/
+---
+
+## 组件简介
+
+`AuthTable` 是一个通用表格组件，支持自定义列模板、单选/多选、可编辑、导出 Excel 等功能。
+
+## 使用示例
+
+```vue
+<template>
+  <auth-table
+    ref="mainTableRef"
+    :id="'tableId'"
+    :table-fields="tableFields"
+    :data="dataList"
+    :edit-model="true"
+    :v-loading="loading"
+    :templates="{'id': idtemplate}"
+    select-type="checkbox"
+    @row-click="handleRowClick"
+    @selection-change="handleSelectionChange"
+    @item-change="handleItemChange"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import AuthTable from '@/components/Base/AuthTable.vue'
+
+// 表单属性定义。为一个`ColumnDefine`的数组。典型的值如下：
+const tableFields = ref([
+  new ColumnDefine('id', 'id', false, false, 'text', '', 'string', 'varchar', ''),
+  new ColumnDefine('tableName', '表名', true, true, 'text', '', 'string', 'varchar', ''),
+  new ColumnDefine('parentTableId', '父表', true, true, 'selectDynamic', '/BuilderTables/AllMain', 'string', 'varchar', '')
+])
+
+// 表格数据源。为一个数组。典型的值如下：
+const dataList = ref([
+  { id: 1, tableName: '表1', parentTableId: null },
+  { id: 2, tableName: '表2', parentTableId: 1 },
+  // ... 其他数据
+])
+const loading = ref(false)
+
+// 主表id模板,点击跳转详情
+const idtemplate = defineComponent({
+  props: ['row'],
+  methods: {
+    itemClick(row) {
+      viewDetail(row)
+    }
+  },
+  template: `<span class="link-text" @click.stop='itemClick(row)'>{{row['id']}}</span>`
+})
+
+const handleRowClick = row => {
+  // 点击行
+  mainTable.value.clearSelection()
+  mainTable.value.toggleRowSelection(row)
+
+  var val = row.id
+  // ...
+}
+
+const handleSelectionChange = val => {
+  multipleSelection.value = val  //当前选中的所有行
+}
+
+const handleItemChange = val => {
+  // 单元格值变化事件处理
+  xxapp.update(item).then(() => {
+    ElNotification.success("更新成功")
+  })
+}
+</script>
+```
+
+## 属性说明
+
+| 属性名         | 类型    | 说明                                   | 默认值      |
+| -------------- | ------- | -------------------------------------- | ----------- |
+| id             | String  | 表格唯一标识，导出 Excel 时必填         | ''          |
+| tableFields    | Array   | 表格列定义，详见下方字段说明            | []          |
+| data           | Array   | 表格数据源                              | []          |
+| selectType     | String  | 选择类型，checkbox（多选）/radio（单选）| 'checkbox'  |
+| editModel      | Boolean | 是否可编辑                              | false       |
+| vLoading       | Boolean | 加载状态                                | false       |
+| templates      | Object  | 自定义列模板，key 为 columnName         | {}          |
+
+### tableFields 字段说明
+
+| 字段名         | 类型    | 说明                                   |
+| -------------- | ------- | -------------------------------------- |
+| columnName     | String  | 字段名，对应 data 中的 key             |
+| remark         | String  | 列显示名称                              |
+| isList         | Boolean | 是否在列表中显示                        |
+| isEdit         | Boolean | 是否可编辑                              |
+| editType       | String  | 编辑类型（select/switch/date/datetime） |
+| dataSource     | Array   | 下拉框数据源（editType 为 select 时）   |
+| sort           | Number  | 排序字段，越小越靠前                    |
+
+## 事件说明
+
+| 事件名            | 说明                       | 回调参数         |
+| ----------------- | -------------------------- | ---------------- |
+| row-click         | 行点击事件                 | row（当前行数据）|
+| selection-change  | 选择项变化事件             | val（选中项数组）|
+| item-change       | 单元格值变化事件           | val（当前行数据）|
+
+## 方法说明
+
+通过 `ref` 可调用以下方法：
+
+| 方法名            | 说明                       | 参数             |
+| ----------------- | -------------------------- | ---------------- |
+| clearSelection    | 清空所有选中项             | 无               |
+| toggleRowSelection| 选中/取消选中指定行         | row（行数据）    |
+| exportExcel       | 导出 Excel 文件            | fileName（文件名）|