114.(前端)商品管理商品搜索——发送请求模糊搜索名称

想成为数据分析师的开发工程师

已于 2022-11-03 18:06:17 修改

阅读量613

点赞数

分类专栏：电子商城管理系统文章标签：前端 elementui vue 前端框架

于 2022-11-02 00:09:59 首次发布

本文链接：https://blog.csdn.net/m0_63953077/article/details/127643860

版权

电子商城管理系统专栏收录该内容

134 篇文章

订阅专栏

1.概述

在这里插入图片描述
本次的主要内容就是通过在输入框中输入名称，点击搜索按钮，对商品名称进行搜索。
主要的思路就是在输入框中输入名称，然后点击搜索功能，携带着输入的名称发送请求即可。

2.具体代码

<el-col :span="8">
        <el-input v-model="qname" placeholder="请求搜索名称">
        <!-- 绑定发送请求的函数getGoodsList -->
               <el-button slot="append" icon="el-icon-search"@click="getGoodsList"></el-button>
       </el-input>
</el-col>
async getGoodsList() {
            const { data: resp } = await this.$axios.get('/api/goods_list',{
                params: { name: this.qname }
            })
            if ( resp.status !== 200 ) return this.$msg.error(resp.msg)
            this.$msg.success(resp.msg)
            this.goodsList = resp.data
        }

3.清空form内容并获取全部数据

使用element-ui中的input内置属性，clearable：当存在内容时，显示可清空；clear绑定函数，当清空时触发

<el-input v-model="qname" placeholder="请求搜索名称" clearable @clear="getGoodsList">

4.效果展示

在这里插入图片描述

5.完整代码展示

<!-- src/components/goods/Goods.vue -->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 具体内容显示 -->
        <el-card>
            <!-- 内容1 -->
            <el-row>
                <!-- 搜索框 -->
                <el-col :span="8">
                    <el-input v-model="qname" placeholder="请求搜索名称" clearable @clear="getGoodsList">
                        <!-- 绑定发送请求的函数getGoodsList -->
                        <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
                    </el-input>
                </el-col>
                <!-- 添加商品按钮 -->
                <el-col :span="4">
                        <el-button type="primary" icon="el-icon-plus">添加商品</el-button>
                </el-col>
            </el-row>
            <!-- 内容2：具体内容显示 -->
            <!-- data可以用来绑定数据，prop会对应数据的列表具体值显示 -->
            <el-table :data="goodsList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="商品名称" prop="name"></el-table-column>
                <el-table-column label="商品价格(元)" prop="price" width="120px"></el-table-column>
                <el-table-column label="商品库存" prop="number" width="80px"></el-table-column>
                <el-table-column label="操作" width="200px">
                    <!-- 创建查槽获取当前列的值 -->
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" icon="el-icon-edit">编辑</el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            goodsList: [],
            qname: ''
        }
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        async getGoodsList() {
            const { data: resp } = await this.$axios.get('/api/goods_list',{
                params: { name: this.qname }
            })
            if ( resp.status !== 200 ) return this.$msg.error(resp.msg)
            this.$msg.success(resp.msg)
            this.goodsList = resp.data
        }
    }
}
</script>

<style lang="less" scoped>
    .el-col{
        margin: 5px;
    }
</style>