用vue3 + element ui 写一个关键字搜索

好的，以下是一个使用Vue 3和Element UI实现的关键字搜索的示例代码：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入关键字"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElInput, ElButton } from 'element-plus';

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElInput,
    ElButton,
  },
  setup() {
    const searchText = ref('');
    const tableData = ref([
      {
        date: '2021-08-01',
        name: '张三',
        address: '北京市海淀区',
      },
      {
        date: '2021-08-02',
        name: '李四',
        address: '上海市浦东区',
      },
      {
        date: '2021-08-03',
        name: '王五',
        address: '广州市天河区',
      },
    ]);

    const search = () => {
      const keyword = searchText.value;
      if (keyword) {
        const filteredData = tableData.value.filter(
          (item) =>
            item.name.includes(keyword) ||
            item.address.includes(keyword)
        );
        tableData.value = filteredData;
      } else {
        // 如果没有关键字，重置表格数据
        tableData.value = [
          {
            date: '2021-08-01',
            name: '张三',
            address: '北京市海淀区',
          },
          {
            date: '2021-08-02',
            name: '李四',
            address: '上海市浦东区',
          },
          {
            date: '2021-08-03',
            name: '王五',
            address: '广州市天河区',
          },
        ];
      }
    };

    return {
      searchText,
      tableData,
      search,
    };
  },
};
</script>

在这个示例中，我们使用了`ElInput`组件来接收用户输入的关键字，使用`ElButton`组件来触发搜索操作。我们还使用了`ElTable`和`ElTableColumn`组件来展示搜索结果。

当用户点击搜索按钮时，我们会获取用户输入的关键字，然后使用`filter`方法来过滤表格数据，只保留包含关键字的数据项。如果没有输入关键字，我们就重置表格数据，展示所有数据项。

请注意，这只是一个简单的示例，您需要根据自己的实际需求进行适当的修改。