后台管理系统如何实现搜索功能

目录

一、前期准备

1.部分代码

 2.效果

3.需求

二、实战

1.User.vue

2.api.js

3.看效果

---

一、前期准备

1.部分代码

（1）api代码，有一个 getUserData()

 getUserData() {
        return request({
            url: '/user/getUserData',
            method: 'get',
        })
    },

（2）User.vue代码

element官网：https://element-plus.org/zh-CN/component/form.html

<el-form :inline="true" >
            <el-form-item label="请输入">
                <el-input placeholder="请输入用户名"  />
            </el-form-item>
             <el-form-item >
            
                 <el-button type="primary"  >搜索</el-button>
            </el-form-item>
 </el-form>

 2.效果

3.需求

我们要在<el-input />的文本框内输入内容，然后点击搜索按钮，最后展示搜索结果 

二、实战

1.User.vue

• 定义了一个名为formInline的响应式对象，它包含一个名为keyWord的属性，用于存储用户输入的关键字。
• 定义一个搜索方法
• 定义一个名为config的响应式对象，它包含一个名为name的属性，用于存储传递给服务器的搜索关键字。

const formInline = reactive({
    keyWord : ''
})

const handleSearch = ()=>{

}

const config = reactive({
    name:''
})

• 将el-form组件的model属性绑定到名为formInline的Vue实例数据属性上。

  :model="formInline" 表示表单的数据模型绑定到名为 formInline 的对象上。

• 将输入框的值与 formInline.keyWord 进行关联。v-model="formInline.keyWord" 是一个双向绑定
• 给按钮绑定一个handleSearch的方法

<el-form :inline="true" :model="formInline" >
            <el-form-item label="请输入">
                <el-input placeholder="请输入用户名"  v-model="formInline.keyWord"/>
            </el-form-item>
             <el-form-item >
                <!-- 给搜索功能绑定一个方法handleSearch -->
                 <el-button type="primary" @click="handleSearch" >搜索</el-button>
            </el-form-item>
 </el-form>

补充搜素方法的代码

• 把我们输入的关键字 formInline.keyWord 赋值给存储传递给服务器的搜索关键字 config.name
• 调用getUserData()方法

// 搜索方法
const handleSearch = ()=>{
    // formInline.keyWord的值赋给config.name，
    config.name = formInline.keyWord
    // 然后调用getUserData方法来获取用户数据。
    getUserData()
}

补充getUserData()方法，把config作为参数传进去

const getUserData = async()=>{
    const data = await proxy.$api.getUserData(config)
    console.log(data)
    tableData.value = data.list.map((item)=>({
        ...item,
        sexLabel : item.sex === 1 ? '男' : '女'
    }))
}

2.api.js

添加data，传递给请求的数据，这里使用了传入的params参数。

  getUserData(params) {
        return request({
            url: '/user/getUserData',
            method: 'get',
            data: params
        })
    },

3.看效果