一开始时候正常的，点击添加按钮，多做几次删除和保存操作，就有一定的概率出现添加按钮无效。实际数据已经push进去，只是不显示我尝试过把getItemData()中的this.items = data || [];改成this.$set(this,"items",data)；在push之后调用this.$forceUpdate()也无效完整代码如下<template> <el-dialog v-el-drag-dialog class="small-padding" :visible.sync="dialogVisible" :close-on-click-modal="false" :title="model.name+'-对接企业'" width="500px" top="3vh"> <div v-loading="contentLoading"> <el-button type="primary" @click="addItem">添加</el-button> <el-form class="form" label-width="100px"> <div v-for="(item,itemIndex) in items" :key="item.id||item.vueKey" style="display: flex;align-items: center"> <div class="item"> <el-form-item label="企业名称"> <vm-select-input :value="item.companyName" @select="$refs.selectCom.open(null,item)"></vm-select-input> </el-form-item> <el-form-item v-for="(param,index) in item.params" :key="index" :label="param.key"> <el-input v-model="param.value"></el-input> </el-form-item> </div> <div> <el-button type="danger" @click="deleteItem(itemIndex)">删除</el-button> <el-button type="primary" style="display: block;margin: 5px 0 0 0" @click="saveItem(item)"> 保存 </el-button> </div> </div> <company-select ref="selectCom" @select="onSelectCom"></company-select> </el-form> </div> </el-dialog></template><script> import CompanySelect from "@/views/company/CompanySelect.vue"; export default { components: {CompanySelect}, data() { return { dialogVisible: false, contentLoading: false, model: { id: "", name: "", params: [], doc: "", }, items: [], }; }, methods: { open(id) { this.model.id = id; this.dialogVisible = true; this.getData(); }, getData() { this.contentLoading = true; this.$http .get("integrations/" + this.model.id) .then(({data}) => { this.$assign(this.model, data); this.getItemData(); }); }, getItemData() { this.contentLoading = true; this.$http .get("integrationItems?integrationId=" + this.model.id) .then(({data}) => { this.contentLoading = false; this.items = data || []; }); }, onSelectCom(row, item) { item.companyId = row.id; item.companyName = row.name; }, addItem() { let params = this.model.params.map(item => { return { key: item, value: "", }; }); console.log(params); this.items.push({ vueKey: this.$util.genKey(), integrationId: this.model.id, companyId: "", companyName: "", params: params, }); }, deleteItem(index) { let itemId = this.items[index].id; if (itemId) { this.$confirm("确定删除吗?", "提示", {type: "warning"}).then(() => { this.$http.delete("integrationItems", itemId).then(() => { this.$message.success("删除成功"); this.getItemData(); }); }); } else { this.items.splice(index, 1); } }, saveItem(item) { this.$http.save("integrationItems", item).then(() => { this.$message.success("保存成功"); this.getItemData(); }); }, }, };</script><style lang="scss" scoped>.form { margin-top: 5px;}.item { flex: 1; background-color: #fcfcfc; padding: 20px 15px 10px 10px; margin-bottom: 10px; border: 1px solid #e8e8e8; border-radius: 3px; margin-right: 5px;}</style>