<template> <div class="leakage-cable"> <div class="leakage-top"> <div style="color: #666666"></div> <div class="operate-btn"> <el-button type="primary" @click="addUser">添加新用户</el-button> </div> </div> <el-table v-loading="loading" :data="tableData" class="statistics-table" style="width: 100%" :row-class-name="tableRowClassName" :header-cell-style="{ background: '#eaf1fe', color: '#000', fontWeight: 700, height: '50px', }" > <el-table-column type="index" label="用户编号" align="center" width="100" /> <el-table-column prop="userName" label="用户名" align="center" /> <el-table-column prop="realName" label="真实姓名" align="center" /> <el-table-column prop="phone" label="电话号码" align="center" /> <el-table-column prop="email" label="邮箱" align="center" /> <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button type="text" @click="toEditPwd(scope.row)">修改密码</el-button> <el-button type="text" @click="toEditInfo(scope.row)">修改基本信息</el-button> </template> </el-table-column> </el-table> <Pagination :limit="params.pageSize" :page="params.pageNum" :total="total" class="pagination" @pagination="handlePageChange" /> <edit @reset="reset" :cur-info="curInfo" :flag="flag"></edit> <ediPwd @reset="reset" :cur-info="curInfo" :flag1="flag1"></ediPwd> </div> </template> <script> import { list } from '../api'; import edit from './components/editInfo.vue'; import ediPwd from './components/editPwd.vue'; export default { data() { return { params: { pageNum: 1, pageSize: 10 }, tableData: [], total: 5, loading: false, curInfo: {}, flag: 0, flag1: 0 } }, components: { edit, ediPwd }, methods: { tableRowClassName({ row, rowIndex }) { return rowIndex % 2 === 0 ? '' : 'single-row'; }, handlePageChange(pageData) { this.params.pageSize = pageData.size; this.params.pageNum = pageData.page; this.getTableData(); }, getTableData() { let params = { current: this.params.pageNum, size: this.params.pageSize } list(params).then(res => { let list = res.records || []; list.forEach(item => { item.userId = item.id; }) this.tableData = list; this.total = res.total; }) }, addUser() { this.curInfo = {}; this.flag = 1; }, toEditInfo(row) { this.curInfo = row; this.flag = 2; }, toEditPwd(row) { this.curInfo = row; this.flag1 = 3; }, reset(needRefresh) { this.flag = 0; this.flag1 = 0; if(needRefresh) { this.getTableData(); } } }, mounted() { this.getTableData(); }, } </script> <style lang="scss" scoped> .leakage-cable { .leakage-top { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; } & ::v-deep .cell { color: #333333; } & ::v-deep .stripe { background-color: #eaf1fe; } & ::v-deep .red { background-color: #f00; } & ::v-deep .green { background-color: green; } .page { display: flex; align-items: center; justify-content: center; margin: 20px 0; .pageNum { margin: 0 20px; } } } </style> <style lang="scss"> .statistics-table { .single-row { background: #f1f6ff; } td { padding: 5px !important; } } </style>