商品列表的搜索功能

需求是：输入商品的名称进行查询，为空的时候展示全部的数据

html代码：

<el-form :inline="true" :model="selform" class="demo-form-inline" style="display: inline;margin-left: 20px;">
  <el-form-item label="">
    <el-input v-model="selform.goods_name" placeholder="请输入要查询的商品名称"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="selname()"  icon="el-icon-search" style="padding: 9px 15px">查询</el-button>
	</el-form-item>
</el-form>
							<div class="bg-white">
								<el-table
										class="shop-list-table"
								    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
								    border
								    style="width: 100%">
								    <el-table-column  prop="goods_id"  label="商品ID"  width="180"></el-table-column>
										<el-table-column  prop="goods_name"  label="商品名称"  width="180"></el-table-column>
								    <el-table-column  prop="cat_name"  label="分类名称"  width="180"></el-table-column>
								    <el-table-column  prop="sort_order"  label="排序"></el-table-column>
										<el-table-column  prop="add_time"  label="添加时间"  width="180"></el-table-column>
										<el-table-column  prop="is_delete"  label="是否删除"  width="180"></el-table-column>
										<el-table-column  prop="address"  label="操作">
												<el-button type="success" icon="el-icon-view">查看</el-button>
												<el-button type="primary" icon="el-icon-edit"	@click="handleEdit()">编辑</el-button>
												<el-button type="danger" icon="el-icon-delete" @click="handleDel()">删除</el-button>
										</el-table-column>
								  </el-table>
									<div class="text-right pt-10">
										<el-pagination
									      background
									      layout="total, prev, pager, next"
									      :total="tableData.length"
									      @current-change="current_change"
									  ></el-pagination>
									</div>
							</div>

js代码：

<script>
import {shopList} from "../../network/shop.js";
export default {
	data() {
	  return {
	    tableData: [],
			total:1000,//默认数据总数
			pagesize:10,//每页的数据条数
			currentPage:1,//默认开始页面
			selform:{
			  goods_name:'',
			},
		};
	},
	created() {
		this.getShopList()
	},
	methods: {
		selname(){
		  let goods_names = this.selform.goods_name;
		  shopList(goods_names).then(res => {
		    if(res.status == 1) {
					this.tableData = res.msg
					for( let i =0;i<this.tableData.length;i++){
						if(this.tableData[i].is_delete == 1){
							this.tableData[i].is_delete ='是'
						}else{
							this.tableData[i].is_delete = '否'
						}
					}
					this.loading = false
				}else if(res.status == 3){
		      this.tableData = []
		    }
		  })
		},
		getShopList() {
			shopList().then(res => {
				// console.log(res)
				if(res.status == 1) {
					this.tableData = res.msg
					// console.log(this.tableData[0].is_show = '是')
					for( let i =0;i<this.tableData.length;i++){
						if(this.tableData[i].is_delete == 1){
							this.tableData[i].is_delete ='是'
						}else{
							this.tableData[i].is_delete = '否'
						}
					}
				}
			})
		},
    current_change(currentPage){
      this.total=this.tableData.length;
      this.currentPage = currentPage;
    },
	}
}
</script>

这个的数据采用的接口的数据

数据格式如下

如果想应用到自己项目的话，可以采用自己写静态数据，或者采用同样格式的接口数据