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>

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