post-ui/src/views/collection/collections/index.vue

<template>
    <div>
        <div class="total">
            <i class="el-icon-tickets" style="margin-right: 5px"></i>藏品列表
            <div class="btn-add">
                <el-button size="small" type="primary" plain @click="handleAdd()">添加</el-button>
            </div>
        </div>
        <div class="list">
            <el-table v-loading="loading" :data="
                seriesList.slice(
                    (pages.currentPage - 1) * pages.pageSize,
                    pages.pageSize * pages.currentPage
                )
            " border>
                <el-table-column prop="id" label="ID" width="100px" align="center">
                </el-table-column>
                <el-table-column prop="name" label="藏品名称" align="center">
                </el-table-column>
                <el-table-column prop="setTime" label="售卖时间" align="center">
                    <!-- <template slot-scope="scope">
              {{ scope.row.setTime }}
            </template> -->
                </el-table-column>
                <el-table-column prop="amount" label="藏品价格（￥）" align="center">
                </el-table-column>
                <el-table-column prop="amount" label="藏品状态" align="center">
                </el-table-column>
                <el-table-column prop="amount" label="数量（份）" align="center">
                </el-table-column>
                <el-table-column prop="operate" label="操作" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" size="mini" @click="handleDetail(scope.row)">藏品详情</el-button>
                            <el-button type="text" size="mini">兑换详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination :current-page="pages.currentPage" background layout="total,prev, pager, next"
                :total="seriesList.length" style="margin-right: 10px; float: right" :page-size.sync="pages.pageSize"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
// mock
import { reqMockData } from "../../../mockjs/reqMock.js";
//后端接口
import { getCollections } from "../../../api/collection/collections"
export default {
    created() {
        this.getSeries();
    },
    data() {
        return {
            // 加载效果
            loading: true,
            // 分页参数
            pages: {
                currentPage: 1,
                pageSize: 10,
            },
        };
    },
    methods: {
        //mock获取数据
        getSeries() {
            reqMockData().then((res) => {
                this.seriesList = res.data;
                this.loading = false;
            });
        },
        
        // 添加藏品
        handleAdd() {
            this.$router.push({ path: "/addcollections" });
        },
        handleCurrentChange(val) {
            this.pages.currentPage = val;
        },
        //藏品详情
        handleDetail(row) {
            this.$router.push({ name: "collectionsDeatil", prams: { row } });
        },
    },
};
</script>
<style lang="scss" scoped>
.total {
    border: 1px solid #ebebeb;
    margin: 20px 15px 20px 20px;
    padding: 20px;
    border-radius: 4px;
}

.btn-add {
    float: right;
    margin: auto;
}

.list {
    margin: 20px 10px 20px 20px;
}
</style>
  <style>