vue+element表格搜索功能

要在Vue和Element UI中实现表格搜索功能，可以使用Vue的计算属性和Element UI的el-table组件。首先，定义一个数组来存储表格数据，例如：

data() {
  return {
    tableData: [
      {
        name: 'John',
        age: 25,
        address: 'New York'
      },
      {
        name: 'Jane',
        age: 30,
        address: 'Los Angeles'
      },
      {
        name: 'Bob',
        age: 35,
        address: 'Chicago'
      }
    ],
    searchText: ''
  }
}

然后，在模板中使用el-table组件来渲染表格，并使用计算属性来过滤数据：

<template>
  <div>
    <el-input v-model="searchText" placeholder="Search"></el-input>
    <el-table :data="filteredData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 25,
          address: 'New York'
        },
        {
          name: 'Jane',
          age: 30,
          address: 'Los Angeles'
        },
        {
          name: 'Bob',
          age: 35,
          address: 'Chicago'
        }
      ],
      searchText: ''
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => {
        return item.name.toLowerCase().includes(this.searchText.toLowerCase())
          || item.address.toLowerCase().includes(this.searchText.toLowerCase());
      });
    }
  }
}
</script>

在计算属性中，我们使用Array.prototype.filter()方法过滤出匹配搜索文本的数据。在模板中，我们使用el-input组件来输入搜索文本，并使用v-model指令将文本绑定到searchText属性上。然后，我们使用computed计算属性来返回过滤后的数据，并将其传递给el-table组件的:data属性。最后，我们使用el-table-column组件来定义表格列，其中prop属性指定列要显示的数据项，label属性指定列标题。