前端vue 列表中回显并下拉选择修改标签

1，vue数据列表中进行回显状态并可以在下拉框中选择修改，效果如下

2，vue 页面关键代码

 <el-table-column label="审核"  align="center" class-name="small-padding fixed-width" prop="status" ><template slot-scope="scope"><el-select v-model="scope.row.status" @change="updateStatus(scope.row)"><el-option v-for="option in options4"  :key="option.value" :value="option.value"  :label="option.text">{{ option.text }}</el-option></el-select></template></el-table-column>

 3，js代码

updateStatus(data){updateStatus({ id: data.id,status:data.status }).then((response) => {this.$modal.msgSuccess("审核成功");this.getList();});

4，后端代码

   @GetMapping(value = "/updateStatus")public AjaxResult updateStatus(String id,Integer status) {try {PetCircles info = petCirclesService.selectPetCirclesById(id);info.setStatus(status);petCirclesService.updatePetCircles(info);} catch (Exception e) {return AjaxResult.error("操作失败");}return AjaxResult.success();}

以上仅供参考