瀏覽代碼

fix:优化序号的选择功能

zeng.chen 1 月之前
父節點
當前提交
c74186a82e
共有 1 個文件被更改,包括 14 次插入25 次删除
  1. 14 25
      src/views/music/album/index.vue

+ 14 - 25
src/views/music/album/index.vue

@@ -61,14 +61,14 @@
       <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
       <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
       <el-table-column label="序号" align="center">
       <el-table-column label="序号" align="center">
         <template slot-scope="scope">
         <template slot-scope="scope">
-          <div v-if="!scope.row.showEdit">
+          <div v-if="currentEditIndex !== scope.$index">
             <span style="margin-right:8px;">
             <span style="margin-right:8px;">
-              {{ form.sortIndex ? form.sortIndex + 1 : "" }}
+              {{ scope.row.sortIndex || '' }}
             </span>
             </span>
-            <svg-icon icon-class="edit" @click.native="handleEditClick(scope.row)" />
+            <svg-icon icon-class="edit" @click.native="handleEditClick(scope.row, scope.$index)" />
           </div>
           </div>
-          <el-input v-else v-model="scope.row.editNumber" size="mini" style="width:60px;" type="number"
-            @blur="onNumberBlur(scope.row)" placeholder="序号" ref="numberInput" />
+          <el-input v-else v-model="scope.row.sortIndex" size="mini" style="width:60px;" type="number"
+            @blur="onNumberBlur(scope.row, scope.$index)" placeholder="序号" ref="numberInput" />
         </template>
         </template>
       </el-table-column>
       </el-table-column>
       <el-table-column label="更新时间" prop="updateTime" align="center">
       <el-table-column label="更新时间" prop="updateTime" align="center">
@@ -125,6 +125,7 @@ export default {
       total: 0,
       total: 0,
       // 列表
       // 列表
       tableData: [],
       tableData: [],
+      currentEditIndex: -1,
       // 批量上下架
       // 批量上下架
       obj: {
       obj: {
         id: "",
         id: "",
@@ -228,22 +229,12 @@ export default {
       );
       );
     },
     },
     // 点击编辑图标显示输入框
     // 点击编辑图标显示输入框
-    handleEditClick(row) {
-      // 先隐藏所有已打开的编辑框
-      this.tableData.forEach(item => {
-        if (item !== row && item.showEdit) {
-          this.$set(item, 'showEdit', false);
-        }
-      });
+    handleEditClick(row, index) {
+      // 设置当前编辑的行索引
+      this.currentEditIndex = index;
 
 
-      // 初始化编辑值为当前序号
-      const index = this.tableData.indexOf(row);
-      const originalNumber = this.form.sortIndex + 1;
-      row.editNumber = originalNumber;
-      this.$set(row, 'showEdit', true);
       // 使用nextTick确保DOM更新后再获取焦点
       // 使用nextTick确保DOM更新后再获取焦点
       this.$nextTick(() => {
       this.$nextTick(() => {
-        // 注意:由于el-table中的ref可能有多个,这里需要使用$refs.numberInput[0]
         const inputs = this.$refs.numberInput;
         const inputs = this.$refs.numberInput;
         if (inputs && inputs.length) {
         if (inputs && inputs.length) {
           inputs[0].focus();
           inputs[0].focus();
@@ -254,15 +245,13 @@ export default {
     },
     },
 
 
     // 输入框失去焦点时隐藏
     // 输入框失去焦点时隐藏
-    onNumberBlur(row) {
-      const originalNumber = this.form.sortIndex + 1;
-
-      if (row.editNumber && row.editNumber !== originalNumber) {
-        console.log('序号已修改:', originalNumber, '→', row.editNumber);
+    onNumberBlur(row, index) {
+      // 重置当前编辑的行索引
+      this.currentEditIndex = -1;
+      if (row.sortIndex != this.tableData[index].sortIndex) {
+        console.log('修改后的序号:', row.sortIndex);
         // 这里可以添加序号修改的API调用逻辑
         // 这里可以添加序号修改的API调用逻辑
       }
       }
-
-      this.$set(row, 'showEdit', false);
     },
     },
 
 
     // 字典翻译
     // 字典翻译