需求是:输入商品的名称进行查询,为空的时候展示全部的数据
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>
这个的数据采用的接口的数据
数据格式如下
如果想应用到自己项目的话,可以采用自己写静态数据,或者采用同样格式的接口数据