vue项目搭配element实现模糊查询

1. 安装Element UI

要在Vue项目中使用Element UI，需要先安装Element UI。可以通过以下命令来安装Element UI：

npm install element-ui --save

2. 引入Element UI

在Vue项目中使用Element UI，需要在Vue的入口文件（通常是main.js文件）中引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建一个带有搜索框的页面

在Vue组件中创建一个搜索框和搜索结果表格，如下所示：

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入搜索关键字"></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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    search() {
      // TODO: 实现模糊查询
    }
  }
}
</script>

4. 实现模糊查询

在search方法中，可以调用后端API来获取与关键字匹配的数据，然后将结果显示在表格中。以下是一个例子：

search() {
  axios.get('/api/search', {
    params: {
      keyword: this.keyword
    }
  }).then(response => {
    this.searchResult = response.data
  }).catch(error => {
    console.log(error)
  })
}

在后端API中，可以使用数据库的LIKE语句来实现模糊查询，例如：

SELECT * FROM users WHERE name LIKE '%关键字%'

5. 完成

现在，已经可以在Vue项目中使用Element UI来实现模糊查询了。