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

好的，以下是一个简单的示例代码：

首先，安装 `element-plus` 和 `axios`：

npm install element-plus axios --save

然后，在 `main.js` 中引入并注册 `ElementPlus`：

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` 组件，用于显示查询结果：

<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` 组件：

<template>
  <div id="app">
    <Search />
  </div>
</template>

<script>
import Search from './components/Search.vue'

export default {
  name: 'App',
  components: {
    Search
  }
}
</script>

最后，在后端创建一个 API 接口，用于处理查询请求。这里使用 Express 框架来创建 API 接口：

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')
})

以上就是一个简单的模糊查询农产品的功能的示例代码，你可以根据实际需求进行修改和扩展。