vue+elementui表格搜索

要在 Vue 中使用 ElementUI 表格进行搜索，你可以使用两种方法：

1. 使用 ElementUI 的 el-input 组件来实现搜索功能

在表格上方添加一个输入框，用户可以在其中输入搜索关键字，然后使用 JavaScript 过滤表格数据并更新表格。

HTML：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input>
    <el-table :data="tableData.filter(item => item.name.includes(searchText))">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

JavaScript：

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ],
      searchText: ''
    };
  }
};

2. 使用 ElementUI 的 el-form 组件来实现搜索功能

这种方法可以将搜索关键字与其他筛选条件一起提交到后端进行处理，然后根据后端返回的数据来更新表格。

HTML：

<template>
  <div>
    <el-form :inline="true" :model="form">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

JavaScript：

export default {
  data() {
    return {
      tableData: [],
      form: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 向后端提交搜索条件，并获取返回数据更新表格
    }
  }
};

以上是两种使用 ElementUI 表格进行搜索的方法，你可以根据自己的需求选择适合自己的方法。