网站目录结构 权限,游戏开发课程,做网站需要的执照,企业网站建设457216336如图#xff1a;
一#xff1a;问题是#xff1a; 我把数据处理后能console.log()打印出来#xff0c;但是页面的内容不能同步的更新渲染#xff1b; 二#xff1a;要求#xff1a; 在数组循环列表里面#xff0c;我点击单个的item按钮时#xff0c;需要实时加载进度…如图
一问题是 我把数据处理后能console.log()打印出来但是页面的内容不能同步的更新渲染 二要求 在数组循环列表里面我点击单个的item按钮时需要实时加载进度条到90%并改变item的flowStatus值同时在页面上渲染当前改变后的状态值。 三方式 用了$delete()先删除这个已经存在并且要改变的键值flowStatus; this.$delete(flow,‘flowStatus’) 再$set()重新赋值flowStatus为我需要的状态值 this.$set(flow,‘flowStatus’,‘0’) 进度条加载一样。。。 四代码
el-row v-for(flow,i) in item.children :keyflow.flowId classflowinfoel-col :span10 :offset1 styledivtemplateel-tag v-ifflow.flowStatus 10 || flow.flowStatus 20 color#red{{等待中}}/el-tagel-tag v-ifflow.flowStatus 0 color#E9EAAC{{启动中...}}/el-tag/template/divdiv classflowel-rowel-col v-ifflow.flowStatus 30 :span15 :offset2任务进度el-progress :percentage90 :keyi :formatformat top20px/el-progress/el-colel-col v-else :span15 :offset2任务进度el-progress :percentageflow.percentage :keyi :formatformat top20px/el-progress/el-col/el-row/div/el-colel-col :span10 :offset1div stylepadding-bottom: 30px; el-button v-else stylefloat: right; typeprimary sizemini clickstart(flow) {{ 启动 }}/el-button/div/el-col/el-row启动按钮 主要看前面几行有注释的 点击某条列表的按钮后该对象里面的状态值flowStatus由a变为b进度条自己加载到90%
start(flow) {this.$nextTick(() {this.$delete(flow,flowStatus) //先删掉对象里的flowStatus值this.$set(flow,flowStatus,0) //再新增flowStatus值为0 第一个值为要改变的对象第二个为要改的键名第三个为改后的键值if(flow.percentage 100) { //这是进度条的变化this.$delete(flow,percentage) //删掉对象里的percentagethis.$set(flow, percentage, 90); // 再新设置percentage值使其发生变化为90}this.$forceUpdate()setTimeout(() {let username storage.get(baseInfo, local) ? storage.get(baseInfo, local).username : null;const queryForm {projectId: projectId,...}startExecutor(queryForm).then(res {if(res.code 200) {this.$message.success(执行成功)} else {this.$notify({title: 执行错误,message: res.message,type: warning});}setTimeout(() {this.getTaskList(this.taskData)}, 1000);})}, 3000);})},点击改变的是里面的flowStatus和percentage item.children[ { “execFlowList”: [ { “runDate”: “20241205”, “submitTime”: 1733469100453, “submitUser”: “hadoop”, “difftime”: “0 sec”, “startTime”: “2024-12-06 15:11:40”, “comment”: “”, “endTime”: “2024-12-06 15:11:40”, “flowId”: “defence”, “projectId”: 6, “outTime”: “0 sec”, “execId”: 230, “status”: “FAILED” } ], “percentage”: 0, “flowExecId”: 230, “flowStatus”: 70, “flowId”: “defence” }… ]
