vue elementui 当数据添加完后需要显示新增后的数据

Vue和Element UI结合使用时，我们可以通过以下步骤实现数据添加完后显示新增后的数据：

1. 在Vue组件中定义一个数据列表，用于维护表格中的数据。

2. 在Element UI的表格组件中，绑定数据列表，并设置列属性，如下所示：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <!-- 其他列属性 -->
</el-table>

3. 在Vue组件中定义一个方法，用于向数据列表中添加新数据，例如：

methods: {
  addData() {
    const newData = { name: '张三', age: 18 }
    this.tableData.push(newData)
  }
}

4. 在Element UI的按钮组件中，绑定添加数据的方法，例如：

<el-button type="primary" @click="addData">添加数据</el-button>

这样，当用户点击添加数据按钮后，就会向数据列表中添加新数据，并自动在表格中显示新增后的数据。

相关问题

vue elementui 当数据添加完后 是刷新页面 还是跳转显示方法

这个问题的答案取决于你的具体需求和业务场景。一般情况下，我们可以通过以下两种方式来实现添加数据后的显示：

1. 刷新页面：当添加数据后需要重新读取整个页面数据时，可以通过刷新页面实现。这可以通过在添加数据后使用 `window.location.reload()` 方法来实现。这种方式相对简单，但用户体验不是很好。

2. 跳转页面：当添加数据后需要在新的页面中显示新增后的数据时，可以通过跳转页面实现。这可以通过使用 Vue Router 来实现。具体的实现方式是，在添加数据后通过编程式导航（`router.push()` 方法）跳转到新的页面，并携带新增后的数据作为路由参数，然后在新的页面中通过 `$route.params` 获取路由参数，并显示数据。这种方式相对复杂，但用户体验更好。

无论采用哪种方式，你都需要在添加数据后更新数据源，以便在刷新页面或跳转页面后能够正确显示新的数据。在 Vue 中，你可以使用 `this.$set()` 方法或 `Vue.set()` 方法来更新数据源。例如：

this.tableData.push(newData) // 添加新数据
this.$set(this.tableData, this.tableData.length - 1, newData) // 更新数据源

其中，`this.$set()` 方法或 `Vue.set()` 方法的第一个参数是要更新的数据源，第二个参数是要更新的数据的索引或属性名，第三个参数是要更新的新值。这样就可以正确更新数据源了。

vue+elementui搜索新增数据

如果你想在Vue和Element UI中实现搜索并添加数据的功能，可以按照以下步骤进行：

1. 创建一个表单，其中包含一个输入框和一个“添加”按钮。

<el-form :model="form" label-width="80px">
  <el-form-item label="搜索">
    <el-input v-model="keyword"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="addData">添加</el-button>
  </el-form-item>
</el-form>

2. 在Vue实例中定义data属性，包括搜索关键字和表单数据。

data() {
  return {
    keyword: '',
    form: {
      name: '',
      age: '',
      // 其他表单字段
    },
    dataList: [
      { name: '张三', age: 20 },
      { name: '李四', age: 25 },
      // 其他数据项
    ]
  }
}

3. 定义一个方法来搜索数据。

methods: {
  searchData() {
    // 根据关键字过滤数据
    this.filteredData = this.dataList.filter(item => {
      return item.name.indexOf(this.keyword) !== -1
    })
  },
  // 其他方法
}

4. 定义一个方法来添加数据。

addData() {
  // 将表单数据添加到数据列表中
  this.dataList.push(this.form)
  // 清空表单数据
  this.form = {
    name: '',
    age: '',
    // 其他表单字段
  }
  // 重新搜索数据
  this.searchData()
}

5. 在mounted钩子中初始化数据。

mounted() {
  this.searchData()
}

6. 在模板中显示搜索结果。

<el-table :data="filteredData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <!-- 其他表格列 -->
</el-table>

这样，当你输入搜索关键字并点击“添加”按钮时，表单数据将被添加到数据列表中，并且搜索结果将包括新的数据项。