From 166fafab9a5853035b03b98a1c7116132d0e6e92 Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Wed, 4 Feb 2026 20:03:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(advanced):=20=E4=BC=98=E5=8C=96=E9=AB=98?=
 =?UTF-8?q?=E7=BA=A7=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E6=B7=BB=E5=8A=A0=E6=BC=94=E7=A4=BA=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 CuteDragTable 和 CuteSimpleTable 的 pageProps 设置为非必填
- 移除 onPageChange 中的 console.log 调试代码并规范化事件发射
- 规范化 order-change 事件的参数传递格式
- 为 CuteEditTable 的输入组件添加宽度样式以改善显示效果
- 在 CuteEditTable 中添加 resetField 方法用于表单重置联动
- 在 CuteRichTextEditor 中添加 resetField 方法的 input 事件发射
- 新增 CuteDragTableDemo、CuteEditTableDemo 和 CuteSimpleTableDemo 演示页面
- 在组件演示主页中添加高级组件的折叠面板展示
---
 .../components/advanced/CuteDragTable.vue     |   7 +-
 .../components/advanced/CuteEditTable.vue     |   9 +
 .../components/advanced/CuteSimpleTable.vue   |   7 +-
 .../components/dev/CuteRichTextEditor.vue     |   1 +
 .../componentsDemo/CuteDragTableDemo.vue      | 126 --------------
 .../componentsDemo/CuteSimpleTableDemo.vue    |  89 +---------
 .../advanced/CuteDragTableDemo.vue            | 154 ++++++++++++++++++
 .../advanced/CuteEditTableDemo.vue            |  93 +++++++++++
 .../advanced/CuteSimpleTableDemo.vue          | 154 ++++++++++++++++++
 .../src/views/componentsDemo/index.vue        |  20 ++-
 10 files changed, 437 insertions(+), 223 deletions(-)
 delete mode 100644 cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/advanced/CuteDragTableDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue
 create mode 100644 cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue

diff --git a/cutejava-front/src/views/components/advanced/CuteDragTable.vue b/cutejava-front/src/views/components/advanced/CuteDragTable.vue
index 0ec1af52..2108cc4d 100644
--- a/cutejava-front/src/views/components/advanced/CuteDragTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteDragTable.vue
@@ -88,7 +88,7 @@ export default {
     },
     pageProps: {
       type: Object,
-      required: true,
+      required: false,
       default: function() {
         return {
           current: 1,
@@ -108,8 +108,7 @@ export default {
         onPageChange: (currentPage, pageSize) => {
           this.pageProps.current = currentPage
           this.pageProps.pageSize = pageSize
-          console.log('on-page-change', currentPage, pageSize)
-          // this.$emit('onPageChange', currentPage, pageSize, total)
+          this.$emit('page-change', currentPage, pageSize)
           this.refresh()
         },
         orderBy: '',
@@ -185,7 +184,7 @@ export default {
       } else {
         result = { column: prop, orderType: 'desc' }
       }
-      // this.$emit('order-change', result)
+      this.$emit('order-change', result.column, result.orderType)
       this.crud.orderBy = result
       this.refresh()
     },
diff --git a/cutejava-front/src/views/components/advanced/CuteEditTable.vue b/cutejava-front/src/views/components/advanced/CuteEditTable.vue
index e84352f8..2ab77ec2 100644
--- a/cutejava-front/src/views/components/advanced/CuteEditTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteEditTable.vue
@@ -24,6 +24,7 @@
           <el-input
             v-if="item.type === 'input'"
             v-model="scope.row[item.name]"
+            style="width: 100%"
             :placeholder="`请输入${item.title}`"
             clearable
             @input="(val) => onRowChange(val, scope.$index, item.name)"
@@ -31,6 +32,7 @@
           <el-select
             v-if="item.type === 'select'"
             v-model="scope.row[item.name]"
+            style="width: 100%"
             :placeholder="`请选择${item.title}`"
             clearable
             @change="(val) => onRowChange(val, scope.$index, item.name)"
@@ -179,6 +181,13 @@ export default {
       }
       dataSource.push(newObj)
       this.dataSource = [...dataSource]
+    },
+    /**
+     * el-form重置联动
+     */
+    resetField() {
+      this.dataSource = []
+      this.$emit('input', this.dataSource)
     }
   }
 }
diff --git a/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue b/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
index 0d8cb9ea..dcca3055 100644
--- a/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
+++ b/cutejava-front/src/views/components/advanced/CuteSimpleTable.vue
@@ -88,7 +88,7 @@ export default {
     },
     pageProps: {
       type: Object,
-      required: true,
+      required: false,
       default: function() {
         return {
           current: 1,
@@ -113,8 +113,7 @@ export default {
         onPageChange: (currentPage, pageSize) => {
           this.pageProps.current = currentPage
           this.pageProps.pageSize = pageSize
-          console.log('on-page-change', currentPage, pageSize)
-          // this.$emit('onPageChange', currentPage, pageSize, total)
+          this.$emit('page-change', currentPage, pageSize)
           this.refresh()
         },
         orderBy: '',
@@ -192,7 +191,7 @@ export default {
       } else {
         result = { column: prop, orderType: 'desc' }
       }
-      // this.$emit('order-change', result)
+      this.$emit('order-change', result.column, result.orderType)
       this.crud.orderBy = result
       this.refresh()
     }
diff --git a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
index 1357bd77..d0fd5487 100644
--- a/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
+++ b/cutejava-front/src/views/components/dev/CuteRichTextEditor.vue
@@ -299,6 +299,7 @@ export default {
      */
     resetField() {
       this.setHtml('')
+      this.$emit('input', '')
     }
   }
 }
diff --git a/cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue b/cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue
deleted file mode 100644
index 8d1fe594..00000000
--- a/cutejava-front/src/views/componentsDemo/CuteDragTableDemo.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 工具栏 -->
-    <div class="head-container">
-      <el-form
-        ref="searchForm"
-        :inline="true"
-        :model="form.model"
-        label-position="right"
-        label-width="80px"
-        :rules="form.rules"
-        size="mini"
-      >
-        <el-form-item label="模糊查询" prop="blurry">
-          <el-input v-model="form.model.blurry" clearable />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onFormSubmit('searchForm')">查询</el-button>
-          <el-button @click="onFormReset('searchForm')">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- 表格渲染 -->
-    <!-- fetch: 获取远程数据 -->
-    <!-- params-transform: 组装查询参数 -->
-    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
-    <!-- primary-key: 主键 -->
-    <!-- showSelect: 是否多选。不传默认false，传true为多选 -->
-    <!-- @selection-change: 当且仅当mode为multi时启用 -->
-    <!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
-    <cute-drag-table
-      ref="instance"
-      :fetch="curd.fetch"
-      :params-transform="curd.paramsTransform"
-      primary-key="id"
-      :page-props="curd.pageProps"
-    >
-      <el-table-column prop="name" label="名称" />
-      <el-table-column prop="description" label="描述" />
-      <el-table-column prop="createTime" label="创建时间" :formatter="FormatRowDateTimeStr" />
-      <el-table-column prop="createBy" label="创建人" />
-      <el-table-column label="操作" width="150" min-width="150" fixed="right">
-        <template slot-scope="scope">
-          <div>
-            <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
-            <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </cute-drag-table>
-  </div>
-</template>
-
-<script>
-import DictService from '@/api/system/dict'
-import CuteDragTable from '@/views/components/advanced/CuteDragTable.vue'
-import { FormatRowDateTimeStr } from '@/utils/KitUtil'
-
-export default {
-  name: 'CuteDragTableDemo',
-  components: { CuteDragTable },
-  data() {
-    return {
-      form: {
-        model: {
-          blurry: ''
-        },
-        rules: {}
-      },
-      curd: {
-        paramsTransform: (pageProps) => {
-          const values = this.form.model
-          return {
-            page: pageProps.current,
-            size: pageProps.pageSize,
-            args: {
-              ...values
-            }
-          }
-        },
-        fetch: async(queryParams) => {
-          return DictService.searchDict(queryParams)
-        },
-        pageProps: {
-          current: 1,
-          pageSize: 10,
-          total: 0
-        }
-      }
-    }
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    FormatRowDateTimeStr,
-    initData() {
-      this.$refs.instance.refresh()
-    },
-    onFormSubmit(formName) {
-      const that = this
-      that.$refs[formName].validate((valid) => {
-        if (valid) {
-          that.$refs.instance.refresh()
-        } else {
-          return false
-        }
-      })
-    },
-    onFormReset(formName) {
-      try {
-        this.$refs[formName].resetFields()
-      } catch (e) {
-        console.error(e)
-      }
-    },
-    onTableEditClick(row) {
-      console.log('编辑', row)
-    },
-    onTableDeleteClick(row) {
-      console.log('删除', row)
-    }
-  }
-}
-</script>
-
diff --git a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
index 400048d7..f2eaa9e4 100644
--- a/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
+++ b/cutejava-front/src/views/componentsDemo/CuteSimpleTableDemo.vue
@@ -25,41 +25,6 @@
         </el-form-item>
       </el-form>
     </div>
-    <!-- 表格渲染 -->
-    <!-- fetch: 获取远程数据 -->
-    <!-- params-transform: 组装查询参数 -->
-    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
-    <!-- primary-key: 主键 -->
-    <!-- showSelect: 是否多选。不传默认false，传true为多选 -->
-    <!-- @selection-change: 当且仅当mode为multi时启用 -->
-    <!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
-    <cute-simple-table
-      ref="instance"
-      :fetch="curd.fetch"
-      :params-transform="curd.paramsTransform"
-      primary-key="id"
-      :page-props="curd.pageProps"
-      show-select
-    >
-      <template v-slot:batchArea>
-        <cute-button type="primary">批量绑定</cute-button>
-      </template>
-      <template v-slot:toolArea>
-        <cute-button type="primary">导出</cute-button>
-      </template>
-      <el-table-column prop="name" label="名称" />
-      <el-table-column prop="description" label="描述" />
-      <el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
-      <el-table-column prop="createBy" label="创建人" />
-      <el-table-column label="操作" width="150" min-width="150" fixed="right">
-        <template slot-scope="scope">
-          <div>
-            <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
-            <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
-          </div>
-        </template>
-      </el-table-column>
-    </cute-simple-table>
     <cute-form-dialog
       ref="dialogForm"
       :model="createFormModel"
@@ -115,19 +80,16 @@
 </template>
 
 <script>
-import CuteSimpleTable from '@/views/components/advanced/CuteSimpleTable.vue'
-import DictService from '@/api/system/dict'
 import CuteFormDialog from '@/views/components/advanced/CuteFormDialog.vue'
 import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
 import { FormatRowDateTimeStr } from '@/utils/KitUtil'
-import CuteButton from '@/views/components/dev/CuteButton.vue'
 import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
 import CuteEditTable from '@/views/components/advanced/CuteEditTable.vue'
 import CuteFormDialogPro from '@/views/components/advanced/CuteFormDialogPro.vue'
 
 export default {
   name: 'CuteSimpleTableDemo',
-  components: { CuteFormProDialog: CuteFormDialogPro, CuteEditTable, CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
+  components: { CuteFormProDialog: CuteFormDialogPro, CuteEditTable: CuteEditTable, CuteTransfer, CuteFormDrawer, CuteFormDialog },
   data() {
     return {
       modeDataSource: [
@@ -157,48 +119,6 @@ export default {
         },
         rules: {}
       },
-      curd: {
-        paramsTransform: (pageProps) => {
-          const values = this.form.model
-          return {
-            page: pageProps.current,
-            size: pageProps.pageSize,
-            args: {
-              ...values
-            }
-          }
-        },
-        fetch: async(queryParams) => {
-          return DictService.searchDict(queryParams)
-        },
-        columns: [
-          { prop: 'name', label: '名称' },
-          { prop: 'description', label: '描述' },
-          { prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
-          { prop: 'createBy', label: '创建人' }
-        ],
-        operateColumn: {
-          width: '150',
-          fixed: 'right',
-          formatter: (row, column, cellValue, index) => {
-            return (<div>
-              <el-button type='text' onClick={() => {
-                console.log('编辑')
-              }}>编辑
-              </el-button>
-              <el-button type='text' onClick={() => {
-                console.log('删除')
-              }}>删除
-              </el-button>
-            </div>)
-          }
-        },
-        pageProps: {
-          current: 1,
-          pageSize: 10,
-          total: 0
-        }
-      },
       // CuteFormDialog
       createFormModel: {
         name: '',
@@ -228,7 +148,6 @@ export default {
     this.initData()
   },
   methods: {
-    FormatRowDateTimeStr,
     initData() {
       this.$refs.instance.refresh()
     },
@@ -263,12 +182,6 @@ export default {
     },
     onDrawerFormSubmit(values) {
       console.log('onDrawerFormSubmit', values)
-    },
-    onTableEditClick(row) {
-      console.log('编辑', row)
-    },
-    onTableDeleteClick(row) {
-      console.log('删除', row)
     }
   }
 }
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteDragTableDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteDragTableDemo.vue
new file mode 100644
index 00000000..5bd48f97
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteDragTableDemo.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>展示结构化数据列表，并支持排序、分页、拖拽排序</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <!-- 表格渲染 -->
+    <!-- fetch: 获取远程数据 -->
+    <!-- params-transform: 组装查询参数 -->
+    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
+    <!-- primary-key: 主键 -->
+    <!-- showSelect: 是否多选。不传默认false，传true为多选 -->
+    <!-- @selection-change: 当且仅当mode为multi时启用 -->
+    <!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
+    <cute-drag-table
+      ref="instance"
+      :fetch="curd.fetch"
+      :params-transform="curd.paramsTransform"
+      primary-key="id"
+      :page-props="curd.pageProps"
+      show-select
+    >
+      <template v-slot:batchArea>
+        <cute-button type="primary">批量绑定</cute-button>
+      </template>
+      <template v-slot:toolArea>
+        <cute-button type="primary">导出</cute-button>
+      </template>
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="description" label="描述" />
+      <el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
+      <el-table-column prop="createBy" label="创建人" />
+      <el-table-column label="操作" width="150" min-width="150" fixed="right">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
+            <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </cute-drag-table>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>方法</h4>
+    <el-table :data="methodData">
+      <el-table-column prop="name" label="函数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="inputArgs" label="入参" />
+      <el-table-column prop="outArgs" label="出参" />
+    </el-table>
+  </div>
+</template>
+<script>
+import DictService from '@/api/system/dict'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import { FormatRowDateTimeStr } from '@/utils/KitUtil'
+import CuteDragTable from '@/views/components/advanced/CuteDragTable.vue'
+
+export default {
+  name: 'CuteDragTableDemo',
+  components: { CuteDragTable, CuteButton },
+  data() {
+    return {
+      curd: {
+        paramsTransform: (pageProps) => {
+          const values = this.form.model
+          return {
+            page: pageProps.current,
+            size: pageProps.pageSize,
+            args: {
+              ...values
+            }
+          }
+        },
+        fetch: async(queryParams) => {
+          return DictService.searchDict(queryParams)
+        },
+        columns: [
+          { prop: 'name', label: '名称' },
+          { prop: 'description', label: '描述' },
+          { prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
+          { prop: 'createBy', label: '创建人' }
+        ],
+        operateColumn: {
+          width: '150',
+          fixed: 'right',
+          formatter: (row, column, cellValue, index) => {
+            return (<div>
+              <el-button type='text' onClick={() => {
+                console.log('编辑')
+              }}>编辑
+              </el-button>
+              <el-button type='text' onClick={() => {
+                console.log('删除')
+              }}>删除
+              </el-button>
+            </div>)
+          }
+        },
+        pageProps: {
+          current: 1,
+          pageSize: 10,
+          total: 0
+        }
+      },
+      apiData: [
+        { name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '否' },
+        { name: 'fetch', remark: '请求数据的API接口', type: 'async(queryParams) => {}', defaultValue: '-', required: '否' },
+        { name: 'paramsTransform', remark: '组装请求参数的方法', type: '(pageProps) => {}', defaultValue: '-', required: '否' },
+        { name: 'responseTransform', remark: '组装响应结果的方法', type: '(response) => {}', defaultValue: '-', required: '否' },
+        { name: 'showSelect', remark: '是否支持多选', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'paging', remark: '是否显示分页组件', type: 'boolean', defaultValue: 'true', required: '否' },
+        { name: 'pageProps', remark: '分页参数', type: 'object', defaultValue: '{current: 1,pageSize: 10,total: 0}', required: '否' },
+        { name: 'customHeight', remark: '自定义高度', type: 'number', defaultValue: 'null', required: '否' },
+        { name: 'selection-change', remark: '选中列表项发生改变的时候触发的回调', type: '(array) => {}', defaultValue: '-', required: '否' },
+        { name: 'order-change', remark: '排序列发生改变的时候触发的回调。el-table-column 需添加 sortable="custom" 属性', type: '(column, orderType) => {}', defaultValue: '-', required: '否' },
+        { name: 'page-change', remark: '分页数据发生改变的时候触发的回调', type: '(currentPage, pageSize) => {}', defaultValue: '-', required: '否' }
+      ],
+      methodData: [
+        { name: 'getDataSource', remark: '获取当前表格的数据', inputArgs: '-', outArgs: 'array' },
+        { name: 'refresh', remark: '刷新当前表格的数据，可以理解为重新执行查询方法。', inputArgs: '-', outArgs: '-' }
+      ]
+    }
+  },
+  mounted() {
+    this.$refs.instance.refresh()
+  },
+  methods: {
+    FormatRowDateTimeStr,
+    onTableEditClick(row) {
+      console.log('编辑', row)
+    },
+    onTableDeleteClick(row) {
+      console.log('删除', row)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue
new file mode 100644
index 00000000..875fd160
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>表单中出现可编辑列表时使用，目前限定在普通表格，不包含可编辑展开表格、可编辑树表等</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <cute-edit-table v-model="dataSource" primary-key="id" :schema="schema" />
+    <h4>与CuteFormDrawer集成 <el-button type="text" @click="showFormDrawer">显示抽屉</el-button></h4>
+    <cute-form-drawer ref="formDrawer" title="与CuteFormDrawer集成" :model="form">
+      <el-form-item label="可编辑表格" prop="editValues" label-width="100px">
+        <cute-edit-table v-model="form.editValues" primary-key="id" :schema="schema" />
+      </el-form-item>
+    </cute-form-drawer>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>Schema属性</h4>
+    <el-table :data="schemaData">
+      <el-table-column prop="name" label="属性名" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+  </div>
+</template>
+<script>
+import CuteEditTable from '@/views/components/advanced/CuteEditTable.vue'
+import CuteFormDrawer from '@/views/components/advanced/CuteFormDrawer.vue'
+
+export default {
+  name: 'CuteEditTableDemo',
+  components: { CuteFormDrawer, CuteEditTable },
+  data() {
+    return {
+      schema: [
+        { name: 'name', title: '姓名', type: 'input' },
+        { name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
+        { name: 'description', title: '描述', type: 'input' }
+      ],
+      dataSource: [
+        { id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
+        { id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
+        { id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
+        { id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
+        { id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
+        { id: 18, name: '小王', sex: 'nn', description: '小王牛P' }
+      ],
+      form: {
+        editValues: [
+          { id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
+          { id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
+          { id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
+          { id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
+          { id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
+          { id: 18, name: '小王', sex: 'nn', description: '小王牛P' }
+        ]
+      },
+      apiData: [
+        { name: 'value', remark: '绑定的值', type: 'array', defaultValue: '-', required: '否' },
+        { name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '是' },
+        { name: 'height', remark: '表格高度', type: 'number', defaultValue: 'height', required: '否' },
+        { name: 'schema', remark: '表格定义', type: 'array', defaultValue: '[]', required: '是' }
+      ],
+      schemaData: [
+        { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'type', remark: '表单项类型。input 输入框 | select 单选框', type: 'string', defaultValue: '-', required: '是' },
+        { name: 'dataSource', remark: '当type=select时必填', type: 'array', defaultValue: '[]', required: '否' }
+      ]
+    }
+  },
+  methods: {
+    showFormDrawer() {
+      this.$refs.formDrawer.show()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue b/cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue
new file mode 100644
index 00000000..50ef12ba
--- /dev/null
+++ b/cutejava-front/src/views/componentsDemo/advanced/CuteSimpleTableDemo.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>展示结构化数据列表，并支持排序、分页</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <!-- 表格渲染 -->
+    <!-- fetch: 获取远程数据 -->
+    <!-- params-transform: 组装查询参数 -->
+    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
+    <!-- primary-key: 主键 -->
+    <!-- showSelect: 是否多选。不传默认false，传true为多选 -->
+    <!-- @selection-change: 当且仅当mode为multi时启用 -->
+    <!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
+    <cute-simple-table
+      ref="instance"
+      :fetch="curd.fetch"
+      :params-transform="curd.paramsTransform"
+      primary-key="id"
+      :page-props="curd.pageProps"
+      show-select
+    >
+      <template v-slot:batchArea>
+        <cute-button type="primary">批量绑定</cute-button>
+      </template>
+      <template v-slot:toolArea>
+        <cute-button type="primary">导出</cute-button>
+      </template>
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="description" label="描述" />
+      <el-table-column prop="createTime" label="创建时间" sortable="custom" :formatter="FormatRowDateTimeStr" />
+      <el-table-column prop="createBy" label="创建人" />
+      <el-table-column label="操作" width="150" min-width="150" fixed="right">
+        <template slot-scope="scope">
+          <div>
+            <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
+            <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </cute-simple-table>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>方法</h4>
+    <el-table :data="methodData">
+      <el-table-column prop="name" label="函数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="inputArgs" label="入参" />
+      <el-table-column prop="outArgs" label="出参" />
+    </el-table>
+  </div>
+</template>
+<script>
+import DictService from '@/api/system/dict'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import CuteSimpleTable from '@/views/components/advanced/CuteSimpleTable.vue'
+import { FormatRowDateTimeStr } from '@/utils/KitUtil'
+
+export default {
+  name: 'CuteSimpleTableDemo',
+  components: { CuteSimpleTable, CuteButton },
+  data() {
+    return {
+      curd: {
+        paramsTransform: (pageProps) => {
+          const values = this.form.model
+          return {
+            page: pageProps.current,
+            size: pageProps.pageSize,
+            args: {
+              ...values
+            }
+          }
+        },
+        fetch: async(queryParams) => {
+          return DictService.searchDict(queryParams)
+        },
+        columns: [
+          { prop: 'name', label: '名称' },
+          { prop: 'description', label: '描述' },
+          { prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
+          { prop: 'createBy', label: '创建人' }
+        ],
+        operateColumn: {
+          width: '150',
+          fixed: 'right',
+          formatter: (row, column, cellValue, index) => {
+            return (<div>
+              <el-button type='text' onClick={() => {
+                console.log('编辑')
+              }}>编辑
+              </el-button>
+              <el-button type='text' onClick={() => {
+                console.log('删除')
+              }}>删除
+              </el-button>
+            </div>)
+          }
+        },
+        pageProps: {
+          current: 1,
+          pageSize: 10,
+          total: 0
+        }
+      },
+      apiData: [
+        { name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '否' },
+        { name: 'fetch', remark: '请求数据的API接口', type: 'async(queryParams) => {}', defaultValue: '-', required: '否' },
+        { name: 'paramsTransform', remark: '组装请求参数的方法', type: '(pageProps) => {}', defaultValue: '-', required: '否' },
+        { name: 'responseTransform', remark: '组装响应结果的方法', type: '(response) => {}', defaultValue: '-', required: '否' },
+        { name: 'showSelect', remark: '是否支持多选', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'paging', remark: '是否显示分页组件', type: 'boolean', defaultValue: 'true', required: '否' },
+        { name: 'pageProps', remark: '分页参数', type: 'object', defaultValue: '{current: 1,pageSize: 10,total: 0}', required: '否' },
+        { name: 'customHeight', remark: '自定义高度', type: 'number', defaultValue: 'null', required: '否' },
+        { name: 'selection-change', remark: '选中列表项发生改变的时候触发的回调', type: '(array) => {}', defaultValue: '-', required: '否' },
+        { name: 'order-change', remark: '排序列发生改变的时候触发的回调。el-table-column 需添加 sortable="custom" 属性', type: '(column, orderType) => {}', defaultValue: '-', required: '否' },
+        { name: 'page-change', remark: '分页数据发生改变的时候触发的回调', type: '(currentPage, pageSize) => {}', defaultValue: '-', required: '否' }
+      ],
+      methodData: [
+        { name: 'getDataSource', remark: '获取当前表格的数据', inputArgs: '-', outArgs: 'array' },
+        { name: 'refresh', remark: '刷新当前表格的数据，可以理解为重新执行查询方法。', inputArgs: '-', outArgs: '-' }
+      ]
+    }
+  },
+  mounted() {
+    this.$refs.instance.refresh()
+  },
+  methods: {
+    FormatRowDateTimeStr,
+    onTableEditClick(row) {
+      console.log('编辑', row)
+    },
+    onTableDeleteClick(row) {
+      console.log('删除', row)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>
diff --git a/cutejava-front/src/views/componentsDemo/index.vue b/cutejava-front/src/views/componentsDemo/index.vue
index d7b1fb75..4d52cecb 100644
--- a/cutejava-front/src/views/componentsDemo/index.vue
+++ b/cutejava-front/src/views/componentsDemo/index.vue
@@ -91,7 +91,19 @@
           </el-collapse-item>
         </el-collapse>
       </el-tab-pane>
-      <el-tab-pane label="高级组件" name="advanced" />
+      <el-tab-pane label="高级组件" name="advanced">
+        <el-collapse accordion>
+          <el-collapse-item title="简单数据表格 CuteSimpleTable" name="CuteSimpleTable">
+            <CuteSimpleTableDemo />
+          </el-collapse-item>
+          <el-collapse-item title="可拖拽排序的数据表格 CuteDragTable" name="CuteDragTable">
+            <CuteDragTableDemo />
+          </el-collapse-item>
+          <el-collapse-item title="可编辑表格 CuteEditTable" name="CuteEditTable">
+            <CuteEditTableDemo />
+          </el-collapse-item>
+        </el-collapse>
+      </el-tab-pane>
     </el-tabs>
   </cute-page>
 </template>
@@ -124,10 +136,16 @@ import CutePreviewDrawerDemo from '@/views/componentsDemo/dev/CutePreviewDrawerD
 import CuteTransferDemo from '@/views/componentsDemo/dev/CuteTransferDemo.vue'
 import CuteFileUploadDemo from '@/views/componentsDemo/business/CuteFileUploadDemo.vue'
 import CuteFileDragUploadDemo from '@/views/componentsDemo/business/CuteFileDragUploadDemo.vue'
+import CuteSimpleTableDemo from '@/views/componentsDemo/CuteSimpleTableDemo.vue'
+import CuteDragTableDemo from '@/views/componentsDemo/advanced/CuteDragTableDemo.vue'
+import CuteEditTableDemo from '@/views/componentsDemo/advanced/CuteEditTableDemo.vue'
 
 export default {
   name: 'SystemComponents',
   components: {
+    CuteEditTableDemo,
+    CuteDragTableDemo,
+    CuteSimpleTableDemo,
     CuteFileDragUploadDemo,
     CuteFileUploadDemo,
     CuteTransferDemo,