feat(CuteEditTable): 增强表格组件功能并优化交互体验

- 将slot-scope语法升级为v-slot现代语法
- 添加disabled状态控制输入框和选择框的禁用状态
- 新增置顶功能按钮，支持将最后一行数据移动到顶部
- 重命名onRowRemove方法为onRowDelete保持语义一致性
- 添加多个事件回调包括row-change、row-delete、row-up、row-down、row-force-up
- 在演示页面中为示例数据添加disabled属性展示禁用效果
- 更新文档说明新增的事件回调参数和使用方式
- 修正CuteTransferDemo中对change事件的描述准确性

cutejava-front/src/views/components/advanced/CuteEditTable.vue

@@ -20,13 +20,14 @@
     >
       <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">
+        <template v-slot="scope">
           <el-input
             v-if="item.type === 'input'"
             v-model="scope.row[item.name]"
             style="width: 100%"
             :placeholder="`请输入${item.title}`"
             clearable
+            :disabled="scope.row.disabled === true"
             @input="(val) => onRowChange(val, scope.$index, item.name)"
           />
           <el-select
@@ -35,6 +36,7 @@
             style="width: 100%"
             :placeholder="`请选择${item.title}`"
             clearable
+            :disabled="scope.row.disabled === true"
             @change="(val) => onRowChange(val, scope.$index, item.name)"
           >
             <el-option
@@ -47,17 +49,11 @@
         </template>
       </el-table-column>
       <el-table-column>
-        <template slot-scope="scope">
+        <template v-slot="scope">
-          <el-button type="text" size="small" @click="onRowRemove(scope.$index)">删除</el-button>
+          <el-button type="text" size="small" :disabled="scope.row.disabled === true" @click="onRowDelete(scope.$index)">删除</el-button>
-          <el-button type="text" size="small" :disabled="scope.$index < 1" @click="onRowUpMove(scope.$index)">上移
+          <el-button type="text" size="small" :disabled="scope.$index < 1 || scope.row.disabled === true" @click="onRowUpMove(scope.$index)">上移</el-button>
-          </el-button>
+          <el-button type="text" size="small" :disabled="scope.$index + 1 >= dataSource.length || scope.row.disabled === true" @click="onRowDownMove(scope.$index)">下移</el-button>
-          <el-button
+          <el-button v-if="scope.$index === dataSource.length - 1" type="text" size="small" :disabled="scope.row.disabled === true" @click="onRowForceUp(scope.$index)">置顶</el-button>
-            type="text"
-            size="small"
-            :disabled="scope.$index + 1 >= dataSource.length"
-            @click="onRowDownMove(scope.$index)"
-          >下移
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -128,16 +124,18 @@ export default {
       dataSource[index][name] = val
       this.dataSource = [...dataSource]
       this.$emit('input', this.dataSource)
+      this.$emit('row-change', index, name, val)
     },
     /**
      * 当删除按钮被点击
      * @param index
      */
-    onRowRemove(index) {
+    onRowDelete(index) {
       const dataSource = this.dataSource
       dataSource.splice(index, 1)
       this.dataSource = [...dataSource]
       this.$emit('input', this.dataSource)
+      this.$emit('row-delete', index)
     },
     /**
      * 当上移按钮被点击
@@ -149,10 +147,12 @@ export default {
       }
       const dataSource = this.dataSource
       const temp = dataSource[index]
-      dataSource[index] = dataSource[index - 1]
+      const newIndex = index - 1
-      dataSource[index - 1] = temp
+      dataSource[index] = dataSource[newIndex]
+      dataSource[newIndex] = temp
       this.dataSource = [...dataSource]
       this.$emit('input', this.dataSource)
+      this.$emit('row-up', index, newIndex, temp)
     },
     /**
      * 当下移按钮被点击
@@ -164,10 +164,32 @@ export default {
       }
       const dataSource = this.dataSource
       const temp = dataSource[index]
-      dataSource[index] = dataSource[index + 1]
+      const newIndex = index + 1
-      dataSource[index + 1] = temp
+      dataSource[index] = dataSource[newIndex]
+      dataSource[newIndex] = temp
       this.dataSource = [...dataSource]
       this.$emit('input', this.dataSource)
+      this.$emit('row-down', index, newIndex, temp)
+    },
+    /**
+     * 当置顶按钮被点击
+     * @param index
+     */
+    onRowForceUp(index) {
+      const dataSource = this.dataSource
+      // 校验是否为最后一行
+      if (index !== dataSource.length - 1) {
+        return
+      }
+      // 获取需要置顶的数据项
+      const targetRow = dataSource[index]
+      // 删除当前索引数据
+      dataSource.splice(index, 1)
+      // 插入到数据开头
+      dataSource.unshift(targetRow)
+      this.dataSource = [...dataSource]
+      this.$emit('input', this.dataSource)
+      this.$emit('row-force-up', targetRow)
     },
     /**
      * 当添加数据按钮被点击

cutejava-front/src/views/componentsDemo/advanced/CuteEditTableDemo.vue

@@ -46,7 +46,7 @@ export default {
       ],
       dataSource: [
         { id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
-        { id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
+        { id: 4, name: '小绿', sex: 'nn', description: '小绿牛P', disabled: true },
         { id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
         { id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
         { id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
@@ -66,7 +66,12 @@ export default {
         { 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: '是' }
+        { name: 'schema', remark: '表格定义', type: 'array', defaultValue: '[]', required: '是' },
+        { name: 'row-change', remark: '行数据发生改变的时候触发的回调', type: '(index, name, val) => {}', defaultValue: '-', required: '否' },
+        { name: 'row-delete', remark: '行被删除的时候触发的回调', type: '(index) => {}', defaultValue: '-', required: '否' },
+        { name: 'row-up', remark: '行被向上移动的时候触发的回调', type: '(index, newIndex, row) => {}', defaultValue: '-', required: '否' },
+        { name: 'row-down', remark: '行被向下移动的时候触发的回调', type: '(index, newIndex, row) => {}', defaultValue: '-', required: '否' },
+        { name: 'row-force-up', remark: '行被置顶的时候触发的回调', type: '(row) => {}', defaultValue: '-', required: '否' }
       ],
       schemaData: [
         { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },

cutejava-front/src/views/componentsDemo/dev/CuteTransferDemo.vue

@@ -60,7 +60,7 @@ export default {
         { name: 'dataSource', remark: '左侧表格数据', type: 'array', defaultValue: '[]', required: '是' },
         { name: 'primary-key', remark: '取对象的哪个值作为value', type: 'string', defaultValue: 'id', required: '否' },
         { name: 'loading', remark: '是否加载中', type: 'boolean', defaultValue: 'false', required: '是' },
-        { name: 'change', remark: '右侧已选值发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
+        { name: 'change', remark: '右侧数据源发生改变的时候触发的回调', type: '(value) => {}', defaultValue: '-', required: '否' }
       ]
     }
   }