vue element管理系統基本佈局
阿新 • • 發佈:2020-07-15
基本佈局:
包括查詢輸入框,內容主體,頁碼切換。
傳入後臺介面包括:
queryInfo: { query: '', pagenum: 1, pagesize: 10 },
其中,query表示查詢內容,pagenum表示當前頁數,pagesize表示每頁顯示的資訊條數
(1)麵包屑導航
<!-- 麵包屑導航區域 --> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item> <el-breadcrumb-item>訂單管理</el-breadcrumb-item> <el-breadcrumb-item>訂單列表</el-breadcrumb-item> </el-breadcrumb>
(2)搜尋框
<el-row> <el-col :span="8"> <el-input placeholder="請輸入內容" v-model="queryInfo.query" clearable @clear="getOrderList"> <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button> </el-input> </el-col> </el-row>
其中,v-model="queryInfo.query" 將搜尋框內容雙向繫結到queryInfo.query中,
@click="getOrderList" 繫結點選搜尋事件
(3)內容
<el-table :data="orderlist" border stripe> <el-table-column type="index" label="#"></el-table-column> <el-table-column label="訂單編號" prop="order_number"></el-table-column> <el-table-column label="訂單價格" prop="order_price"></el-table-column> <el-table-column label="是否付款" prop="pay_status"> <template slot-scope="scope"> <el-tag type="success" v-if="scope.row.pay_status==='1'">已付款</el-tag> <el-tag type="danger" v-else>未付款</el-tag> </template> </el-table-column> <el-table-column label="是否發貨" prop="is_send"></el-table-column> <el-table-column label="下單時間" prop="create_time"> <template slot-scope="scope"> {{scope.row.create_time | dateFormat}} </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="primary" icon="el-icon-edit"></el-button> <el-button size="mini" type="success" icon="el-icon-location"></el-button> </template> </el-table-column> </el-table>
<template slot-scope是作用域插槽,可以藉助作用域插槽訪問或者修改element元件的資料。凡是vue匯入的元件,均可以用作用域插槽進行訪問修改。
(4)頁碼
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background> </el-pagination>
其中,當每頁條數改變時,handleSizeChange函式傳入新的size引數;當頁碼改變時,handleCurrentChange傳入新的頁碼引數,根據引數發出響應獲得資料。
:page-size,:current-page 分別表示當前大小和頁碼號, :total為資料量
methods: { async getOrderList() { const {data: res} = await this.$http.get('orders', {params: this.queryInfo}) if (res.meta.status !== 200){ return this.$message.error('獲取訂單列表失敗') } //console.log(res) this.$message.success('獲取商品列表成功') this.total = res.data.total this.orderlist = res.data.goods }, handleSizeChange(newSize) { this.queryInfo.pagesize = newSize this.getOrderList() }, handleCurrentChange(newPage) { this.queryInfo.pagenum = newPage this.getOrderList() } }
全部程式碼
<template> <div> <!-- 麵包屑導航區域 --> <el-breadcrumb separator="/"> <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> <el-col :span="8"> <el-input placeholder="請輸入內容" v-model="queryInfo.query" clearable @clear="getOrderList"> <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button> </el-input> </el-col> </el-row> <!-- 訂單列表資料 --> <el-table :data="orderlist" border stripe> <el-table-column type="index" label="#"></el-table-column> <el-table-column label="訂單編號" prop="order_number"></el-table-column> <el-table-column label="訂單價格" prop="order_price"></el-table-column> <el-table-column label="是否付款" prop="pay_status"> <template slot-scope="scope"> <el-tag type="success" v-if="scope.row.pay_status==='1'">已付款</el-tag> <el-tag type="danger" v-else>未付款</el-tag> </template> </el-table-column> <el-table-column label="是否發貨" prop="is_send"></el-table-column> <el-table-column label="下單時間" prop="create_time"> <template slot-scope="scope"> {{scope.row.create_time | dateFormat}} </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="primary" icon="el-icon-edit"></el-button> <el-button size="mini" type="success" icon="el-icon-location"></el-button> </template> </el-table-column> </el-table> <!-- 頁碼區域 --> <!-- 分頁區域 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :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 }, total: 0, orderlist: [] } }, created () { this.getOrderList() }, methods: { async getOrderList() { const {data: res} = await this.$http.get('orders', {params: this.queryInfo}) if (res.meta.status !== 200){ return this.$message.error('獲取訂單列表失敗') } //console.log(res) this.$message.success('獲取商品列表成功') this.total = res.data.total this.orderlist = res.data.goods }, handleSizeChange(newSize) { this.queryInfo.pagesize = newSize this.getOrderList() }, handleCurrentChange(newPage) { this.queryInfo.pagenum = newPage this.getOrderList() } } } </script> <style lang="less" scoped> </style>