vue实现 文件重命名

1.点击重命名并定义一个弹框

  <template slot-scope="scope">                   
   <el-button size="mini"  @click="showRenameDialog(scope.row)">重命名</el-button>                                   
  </template>

          <el-dialog
                title="文件重命名"
                :visible.sync="RenameDialogVisible"
                width="40%"
                @close="resetForm('FileFormRef')"
                :close-on-click-modal="false"
                >
            <el-form
                    :model="FileForm"
                    ref="FileFormRef"
                    label-width="100px">
                <el-form-item label="当前文件名: ">
                    {{FileForm.name}}
                </el-form-item>
                <el-form-item label="新文件名">
                    <el-input v-model="newFileName"></el-input>
                </el-form-item>
            </el-form>
                <span slot="footer" class="dialog-footer">
                   <el-button @click="RenameDialogVisible = false">取 消</el-button>
                   <el-button type="primary" @click="SaveFileInfo">确 定</el-button>
                </span>
        </el-dialog>

2.在return中定义变量：

 RenameDialogVisible: false,
 FileForm: {},
 newFileName: '',

3.methods中进行操作

        async SaveFileInfo(){
            if (this.newFileName === ''){
                return this.$message.error("新文件名不能为空")
            }
            const {status: status} = await this.axios.put("file/updateFileName", {"id": 
                                       this.FileForm.ID,"newFileName": this.newFileName});
            if (status !== 200) return this.$message.error("重命名失败");
            this.$message.success("重命名成功");
            this.RenameDialogVisible = false;
            this.getFileList();
          }

标签：重命名,文件,vue,return,FileForm,newFileName,status,message
来源： https://blog.csdn.net/lwg112233/article/details/122777192