<el-button @click="addToSelectedData" style="height: 40px;" :clearable="false">添加</el-button> </div> <el-table :data="dialogObj.children"> <el-table-column prop="name" label="分项"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> addToSelectedData() { // 将选择好的信息添加到数组中 this.dialogObj.children.push({ name: this.dialogObj.indexName, }) console.log(this.dialogObj) }, deleteSelectedData(index) { this.selectedData.splice(index, 1) },添加之后怎么去重，并弹出提醒

可以在添加之前先判断一下该项是否已经存在于数组中，如果存在则不添加并弹出提示，如果不存在则添加到数组中。代码如下：

addToSelectedData() {
  // 判断该项是否已经存在于数组中
  if (this.dialogObj.children.some(item => item.name === this.dialogObj.indexName)) {
    this.$message.warning('该项已经添加过了！')
    return
  }
  // 将选择好的信息添加到数组中
  this.dialogObj.children.push({
    name: this.dialogObj.indexName,
  })
  console.log(this.dialogObj)
},

至于弹出提醒，可以使用 Element UI 中的 Message 组件，如上面的代码所示，在判断该项已经存在时使用 `this.$message.warning('该项已经添加过了！')` 弹出一个警告提示。

相关问题

<el-dialog :title="formEditTitle" :visible.sync="dialogEdittVisible" width="700px"> <div style="display: flex; justify-content: center; height: 40px;"> <span style="align-self: center;">总量：</span> <el-input id="input-box" @input="forceUpdate" placeholder="在这里输入内容" v-model="dialogObj.name" style="width: 250px;"></el-input> <div class="radiobox" style="flex: 1; height: 100px; text-align: center; margin-left: 20px;"> <el-form> <span>分项：</span> <el-select filterable v-model="dialogObj.indexName" placeholder="请选择" @change="showSelectedValue" style="flex: 1; height: 100px; text-align: center;"> <el-option v-for="(itemOne, item) in templateList" :key="item" :label="itemOne" :value="itemOne" > </el-option> </el-select> </el-form> </div> <el-button @click="addToSelectedData" style="height: 40px;" :clearable="false">添加</el-button> </div> <el-table :data="dialogObj.children"> <el-table-column prop="name" label="分项"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="deleteSelectedData(scope.$index)">删除</el-button> </template>怎么实现点击添加之后刷新表单页面

可以在添加按钮的点击事件中，调用 `this.$forceUpdate()` 方法，来强制刷新表单页面。具体代码可以这样写：

<el-button @click="addToSelectedData; $nextTick(() => $forceUpdate())" style="height: 40px;" :clearable="false">添加</el-button>

在点击添加按钮之后，首先执行 `addToSelectedData` 方法，然后使用 `$nextTick` 方法来在 DOM 更新后执行 `$forceUpdate` 方法，从而实现刷新表单页面的效果。

<el-button @click="addToSelectedData" style="height: 40px;" :clearable="false">添加</el-button> </div> <el-table :data="dialogObj.children"> <el-table-column prop="name" label="分项"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="deleteSelectedData(scope.$index)">删除</el-button> deleteSelectedData(index) { this.selectedData.splice(index, 1) },点击删除按钮为什么无法删除

这段代码缺少一些关键信息，不过从你提供的代码中可以看出，你在删除表格数据时只是从 `selectedData` 中删除了对应的数据，但是并没有从 `dialogObj.children` 中删除相应的数据。因此，当你再次渲染表格时，该数据仍然存在，导致删除按钮无法正确删除数据。

你需要在 `deleteSelectedData` 方法中同时删除 `selectedData` 和 `dialogObj.children` 中的数据。可以尝试修改代码如下：

deleteSelectedData(index) {
  this.selectedData.splice(index, 1)
  this.dialogObj.children.splice(index, 1)
},

这样就可以同时删除 `selectedData` 和 `dialogObj.children` 中的数据，保证删除操作的正确性。