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>