From d2b96186b5293c5ca184844a722b1e600925aecf Mon Sep 17 00:00:00 2001
From: Odboy <tianjun@odboy.cn>
Date: Sun, 1 Feb 2026 10:37:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(CuteEditTable):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=96=B0=E5=A2=9E=E8=A1=8C=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E8=BE=93=E5=85=A5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为表格添加新增行按钮，支持动态添加数据行
- 为输入框和选择器添加占位符提示文本
- 修复表格高度计算逻辑，统一使用height属性
- 为schema属性添加默认值空数组
---
 .../views/components/dev/CuteEditTable.vue    | 119 +++++++++++-------
 1 file changed, 73 insertions(+), 46 deletions(-)

diff --git a/cutejava-front/src/views/components/dev/CuteEditTable.vue b/cutejava-front/src/views/components/dev/CuteEditTable.vue
index 2ba4713e..191097c3 100644
--- a/cutejava-front/src/views/components/dev/CuteEditTable.vue
+++ b/cutejava-front/src/views/components/dev/CuteEditTable.vue
@@ -5,40 +5,60 @@
  * @created 2026-02-01
  -->
 <template>
-  <el-table
-    ref="table"
-    stripe
-    empty-text="暂无数据"
-    :row-key="primaryKey"
-    fit
-    :data="dataSource"
-    style="width: 100%;"
-    :height="height"
-    :max-height="height"
-    highlight-current-row
-  >
-    <el-table-column type="index" width="70" />
-    <el-table-column v-for="item in schema" :key="item[primaryKey]" :prop="item.name" :label="item.title">
-      <template slot-scope="scope">
-        <el-input v-if="item.type === 'input'" v-model="scope.row[item.name]" @input="(val) => onRowChange(val, scope.$index, item.name)" />
-        <el-select v-if="item.type === 'select'" v-model="scope.row[item.name]" @change="(val) => onRowChange(val, scope.$index, item.name)">
-          <el-option
-            v-for="option in (item.dataSource || [])"
-            :key="option.value"
-            :label="option.label"
-            :value="option.value"
+  <div>
+    <el-table
+      ref="table"
+      stripe
+      empty-text="暂无数据"
+      :row-key="primaryKey"
+      fit
+      :data="dataSource"
+      style="width: 100%;"
+      :height="height"
+      :max-height="height"
+      highlight-current-row
+    >
+      <el-table-column type="index" width="70" />
+      <el-table-column v-for="item in schema" :key="item[primaryKey]" :prop="item.name" :label="item.title">
+        <template slot-scope="scope">
+          <el-input
+            v-if="item.type === 'input'"
+            v-model="scope.row[item.name]"
+            :placeholder="`请输入${item.title}`"
+            @input="(val) => onRowChange(val, scope.$index, item.name)"
           />
-        </el-select>
-      </template>
-    </el-table-column>
-    <el-table-column>
-      <template slot-scope="scope">
-        <el-button type="text" size="small" @click="onRowRemove(scope.$index)">删除</el-button>
-        <el-button type="text" size="small" :disabled="scope.$index < 1" @click="onRowUpMove(scope.$index)">上移</el-button>
-        <el-button type="text" size="small" :disabled="scope.$index + 1 >= dataSource.length" @click="onRowDownMove(scope.$index)">下移</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+          <el-select
+            v-if="item.type === 'select'"
+            v-model="scope.row[item.name]"
+            :placeholder="`请选择${item.title}`"
+            @change="(val) => onRowChange(val, scope.$index, item.name)"
+          >
+            <el-option
+              v-for="option in (item.dataSource || [])"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column>
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="onRowRemove(scope.$index)">删除</el-button>
+          <el-button type="text" size="small" :disabled="scope.$index < 1" @click="onRowUpMove(scope.$index)">上移
+          </el-button>
+          <el-button
+            type="text"
+            size="small"
+            :disabled="scope.$index + 1 >= dataSource.length"
+            @click="onRowDownMove(scope.$index)"
+          >下移
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-button size="small" plain icon="el-icon-plus" style="width: 100%" @click="onRowAddClick">新增一行数据</el-button>
+  </div>
 </template>
 
 <script>
@@ -68,15 +88,18 @@ export default {
      */
     schema: {
       type: Array,
-      require: true
+      require: true,
+      default: function() {
+        return []
+      }
     },
     /**
-     * 自定义高度
+     * 表格高度
      */
-    customHeight: {
+    height: {
       type: Number,
       required: false,
-      default: null
+      default: 240
     }
   },
   data() {
@@ -84,14 +107,6 @@ export default {
       dataSource: []
     }
   },
-  computed: {
-    height() {
-      if (this.customHeight) {
-        return this.customHeight
-      }
-      return document.documentElement.clientHeight - 300
-    }
-  },
   mounted() {
     if (this.value && this.value.length > 0) {
       this.dataSource = this.value
@@ -140,7 +155,6 @@ export default {
      * @param index
      */
     onRowDownMove(index) {
-      console.log('=====onRowDownMove1', index)
       if (index >= this.dataSource.length - 1) {
         return
       }
@@ -150,6 +164,19 @@ export default {
       dataSource[index + 1] = temp
       this.dataSource = [...dataSource]
       this.$emit('input', this.dataSource)
+    },
+    /**
+     * 当添加数据按钮被点击
+     */
+    onRowAddClick() {
+      const dataSource = this.dataSource
+      const schema = this.schema
+      const newObj = {}
+      for (const element of schema) {
+        newObj[element.name] = null
+      }
+      dataSource.push(newObj)
+      this.dataSource = [...dataSource]
     }
   }
 }