vue模拟列表数据
vue模拟列表数据
<template> <div class="home"> <el-container style="height: 100vh; border: 1px solid #eee"> <el-aside width="auto" style="background-color: rgb(238, 241, 246); height: 100vh" > <el-menu :default-openeds="['1', '3']" style="min-height: 100%; border-right: none" class="el-menu-vertical-demo" background-color="rgb(48, 65, 86)" text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false" :collapse="isCollapse" > <div style="height: 60px; line-height: 60px; text-align: center"> <img src="../assets/logo.png" alt="" style=" width: 20px; position: relative; top: 5px; margin-right: 5px; " /> <b style="color: white" v-show="logoTextShow">后台管理系统</b> </div> <el-submenu index="1"> <template slot="title" ><i class="el-icon-message"></i><span>导航一</span></template > <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title" ><i class="el-icon-menu"></i><span>导航二</span></template > <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title" ><i class="el-icon-setting"></i><span>导航三</span></template > <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style=" font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex; " > <div style="flex: 1; font-size: 20px"> <span :class="collapseBtnClass" style="cursor: pointer" @click="handleCollapse" ></span> </div> <el-dropdown style="width: 70px; cursor: pointer"> <span>王小虎</span> <i class="el-icon-arrow-down" style="margin-left: 5px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人信息</el-dropdown-item> <el-dropdown-item>退出logout</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <div style="margin-bottom: 30px"> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> </el-breadcrumb> </div> <div style="padding: 10px 0"> <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入名称" ></el-input> <el-input style="width: 200px" suffix-icon="el-icon-message" placeholder="请输入邮箱" class="ml-5" ></el-input> <el-input style="width: 200px" suffix-icon="el-icon-position" placeholder="请输入地址" class="ml-5" ></el-input> <el-button class="ml-5" type="primary">搜索</el-button> </div> <div style="margin: 10px 0"> <el-button type="primary" >新增<i class="el-icon-circle-plus-outline" style="margin-left: 5px" ></i ></el-button> <el-button type="primary" >批量删除<i class="el-icon-remove-outline" style="margin-left: 5px" ></i ></el-button> <el-button type="primary" >导入<i class="el-icon-bottom" style="margin-left: 5px"></i ></el-button> <el-button type="primary" >导出<i class="el-icon-top" style="margin-left: 5px"></i ></el-button> </div> <el-table :data="tableData" border stripe :header-cell-style="{ background: '#eee' }" > <el-table-column prop="username" label="姓名" width="140"> </el-table-column> <el-table-column prop="nickname" label="昵称" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column prop="email" label="邮箱"> </el-table-column> <el-table-column prop="createTime" label="创建时间"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" @click="handleClick(scope.row)" size="small" >编辑</el-button > <el-button type="text" @click="handleClick(scope.row)" size="small" >删除</el-button > </template> </el-table-column> </el-table> <div style="padding: 10px 0"> <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" > </el-pagination> </div> </el-main> </el-container> </el-container> </div> </template> <style> .home { height: 100vh; } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> <script> export default { name: "HomeView", data() { const item = { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }; return { tableData: [], // Array(10).fill(item), total: 0, isCollapse: false, collapseBtnClass: "el-icon-s-fold", logoTextShow: true, headerCLass: "{background:'#eee'}", }; }, created() { fetch("http://localhost:9090/admin/user/pageLists?pageSize=2&pageNum=2") .then((res) => res.json()) .then((res) => { debugger; this.tableData = res.pageList; this.total = res.total; }); }, methods: { handleCollapse() { this.isCollapse = !this.isCollapse; if (this.isCollapse) { // 收缩 this.collapseBtnClass = "el-icon-s-unfold"; this.logoTextShow = false; } else { // 展开 this.collapseBtnClass = "el-icon-s-fold"; this.logoTextShow = true; } }, }, }; </script>
其中主要部分
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
return {
tableData: Array(10).fill(item),
};
}
