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>

<el-row :gutter="20">

<el-col :span="8">

<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="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">添加商品</el-button>

</el-col>

</el-row>

<!-- 表格数据 -->

<el-table :data="goodslist" border stripe>

<el-table-column type="index"></el-table-column>

<el-table-column label="商品名称" prop="goods_name"></el-table-column>

<el-table-column label="商品价格(元)" prop="goods_price" width="95px"></el-table-column>

<el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column>

<el-table-column label="创建时间" width="160px">

<template slot-scope="scope">

{{scope.row.add_time | dateFormat}}

</template>

</el-table-column>

<el-table-column label="操作" width="130px">

<template sloat-scope="scope">

<el-button type="primary" size="mini" icon="el-icon-edit"></el-button>

<el-button type="danger" size="mini" icon="el-icon-delete"></el-button>

</template>

</el-table-column>

</el-table>

<!-- 分页数据 -->

<el-pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="queryInfo.pagenum"

:page-sizes="[10, 200, 30, 50]"

:page-size="queryInfo.pagesize"

layout="total, sizes, prev, pager, next, jumper"

:total="total" background>

</el-pagination>

</el-card>

<!-- 卡片区域结束 -->

</div>

</template>

<script>

export default {

data(){

return {

// 查询参数

queryInfo:{

query:'',

pagenum:1,

pagesize:10

},

// 商品列表

goodslist:[],

// 总条数

total:0

}

},

created(){

// 根据分页获取对应的商品列表

this.getGoodsList()

},

methods:{

// 根据分页获取对应的商品列表

async getGoodsList(){

const {data:res} = await this.$http.get('goods',{

params:this.queryInfo

})

if(res.meta.status !== 200){

return this.$message.error('获取列表失败')

}

this.goodslist = res.data.goods

this.total = res.data.total

},

handleSizeChange(newSize){

this.queryInfo.pagesize = newSize

this.getGoodsList()

},

handleCurrentChange(newPage){

this.queryInfo.pagenum = newPage

this.getGoodsList()

}

}

}

</script>

<style scoped>

</style>