用Vue3+element plus+js写一段查询代码

### 回答1：
好的，以下是一段使用 Vue3、Element Plus 和 JavaScript 编写的查询代码：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  components: {
    ElInput,
    ElButton,
    ElTable,
    ElTableColumn,
  },
  setup() {
    const state = reactive({
      searchText: '',
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' },
      ],
    })

    const search = () => {
      const { searchText, tableData } = state
      if (!searchText) {
        return
      }
      state.tableData = tableData.filter(item => {
        return item.name.includes(searchText)
      })
    }

    return {
      ...state,
      search,
    }
  },
}
</script>

这段代码实现了一个简单的查询功能，用户可以输入搜索内容，点击搜索按钮后，会根据输入的内容过滤表格数据，并展示匹配的结果。其中，使用了 Vue3 的响应式数据和组合式 API，以及 Element Plus 的 UI 组件。

### 回答2：
以下是使用Vue3和Element Plus编写的一个查询代码示例：

<template>
  <div>
    <el-input
      v-model="searchInput"
      placeholder="请输入关键词"
      clearable
    ></el-input>
    <el-button type="primary" @click="search">查询</el-button>
    <el-table
      :data="searchResult"
    >
      <el-table-column
        prop="name"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
      ></el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const searchInput = ref('');
    const searchResult = ref([]);

    const search = () => {
      // 发起查询请求，并将结果更新到searchResult
      // 这里假设查询结果为一个包含多个对象的数组
      searchResult.value = [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '男' },
        { name: '王五', age: 22, gender: '女' },
      ];
    };

    return {
      searchInput,
      searchResult,
      search
    };
  },
};
</script>

上面的代码实现了一个简单的查询功能，用户可以在输入框中输入关键词，点击查询按钮后，会将输入的关键词发送给后端进行查询，并将查询结果显示在表格中。

其中，`searchInput`通过`v-model`绑定到输入框上，用于接收用户的输入。`searchResult`是一个响应式的数组，用于存储查询结果，并在表格中进行展示。

`search`函数是点击查询按钮时的回调函数。在这个函数中，可以发起查询请求，并将查询结果更新到`searchResult`。这里为了简化示例，假设查询请求返回了一个包含多个对象的数组，每个对象包含了姓名、年龄和性别等字段。最后，将`searchInput`、`searchResult`和`search`暴露给组件模板使用。

### 回答3：
Vue3是一个用于构建用户界面的渐进式JavaScript框架，Element Plus是一套基于Vue3的UI组件库，将这两者结合起来，可以方便地编写漂亮而功能强大的查询代码。

以下是一段使用Vue3和Element Plus编写的查询代码示例：

<template>
  <div class="container">
    <el-input v-model="searchValue" placeholder="请输入关键字" clearable @clear="clearSearch"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const searchValue = reactive('')
    const tableData = reactive([
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 25, gender: '男' }
    ])

    const search = () => {
      const result = tableData.filter(item => {
        return item.name.includes(searchValue)
      })
      // 更新表格数据
      // ...
    }

    const clearSearch = () => {
      searchValue = ''
      // 清空搜索关键字
      // ...
    }

    return {
      searchValue,
      tableData,
      search,
      clearSearch
    }
  }
}
</script>

上述代码中，在模板部分，使用`el-input`组件实现输入框，`el-button`组件实现搜索按钮，以及`el-table`组件展示查询结果。在脚本部分，通过`reactive`函数创建了`searchValue`和`tableData`两个响应式数据。`search`方法通过`filter`函数根据关键字筛选数据，`clearSearch`方法用于清空搜索关键字。最后，在`<script>`标签中的`return`语句中，将这些定义的变量和方法添加到组件的模板中使用。

这段代码实现了一个简单的查询功能，用户可以在输入框中输入关键字，点击搜索按钮后，根据关键字筛选表格数据，并展示在页面上。同时，还提供了清空搜索关键字的功能。