用vue3和element-plus写一个模糊查询农产品的功能

好的，以下是一个简单的示例代码： 首先，安装 `element-plus` 和 `axios`： ``` npm install element-plus axios --save ``` 然后，在 `main.js` 中引入并注册 `ElementPlus`： ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App) .use(ElementPlus) .mount('#app') ``` 接下来，创建一个 `Search.vue` 组件，用于显示查询结果： ```vue <template> <div> <el-input v-model="keyword" placeholder="请输入关键字" @change="search" /> <el-table :data="products" style="width: 100%"> <el-table-column prop="name" label="名称" /> <el-table-column prop="price" label="价格" /> <el-table-column prop="description" label="描述" /> </el-table> </div> </template> <script> import axios from 'axios' export default { name: 'Search', data() { return { keyword: '', products: [] } }, methods: { async search() { try { const response = await axios.get(`/api/products?keyword=${this.keyword}`) this.products = response.data } catch (error) { console.error(error) } } } } </script> ``` 这个组件包含了一个输入框和一个表格，用户可以在输入框中输入关键字进行查询，然后表格会显示符合条件的产品。 接下来，在 `App.vue` 中引入 `Search` 组件： ```vue <template> <div id="app"> <Search /> </div> </template> <script> import Search from './components/Search.vue' export default { name: 'App', components: { Search } } </script> ``` 最后，在后端创建一个 API 接口，用于处理查询请求。这里使用 Express 框架来创建 API 接口： ```javascript const express = require('express') const app = express() const products = [ { id: 1, name: '苹果', price: 5.0, description: '新鲜的苹果' }, { id: 2, name: '香蕉', price: 3.0, description: '甜美的香蕉' }, { id: 3, name: '橙子', price: 4.0, description: '酸甜可口的橙子' }, { id: 4, name: '西瓜', price: 10.0, description: '清凉解暑的西瓜' } ] app.get('/api/products', (req, res) => { const keyword = req.query.keyword const result = products.filter(product => product.name.includes(keyword)) res.send(result) }) app.listen(3000, () => { console.log('Server is listening on port 3000') }) ``` 以上就是一个简单的模糊查询农产品的功能的示例代码，你可以根据实际需求进行修改和扩展。