At present in practice to do a background management system, want to achieve the display of the user list page, you can carry out user query, paging and add, delete and change functions, the following is the final effect:
Nonsense not to say, first on the code:
Data binding is done through the V-model in the tag
<template> <div> <! Separator =" separator "--> <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 > user list </ El-breadcrumb-item > </ El-breadcrumb-item > <! -- card attempt area --> <el-card> <! PlaceHolder =" v-Model =" QueryInfo.Query "clearable @clear="getUserList"> <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button> </el-input> </ El-col > < El-col :span="4"> < El-col Type =" Primary "@Click =" AddDialogVisible = True "> Add user </ El-col > </ El-col > </el-row> <! --> <el-table :data="userList" border stripe> <el-table-column type="index" label="#"></el-table-column> <el-table-column label=" username" prop="username" </el-table-column BB1 <el-table-column label=" mailbox" Prop ="email"></el-table-column> <el-table-column Label ="mobile"></el-table-column> <el-table-column Label =" role" Prop ="role_name"></el-table-column> <el-table-column label=" status ">< template slot-scope="scope"> <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch> </template> </el-table-column> Width ="180px"> <template slot-scope="{}"> <el-button type="primary" icon="el-icon-edit" size="mini"></el-button> <el-button type="danger" icon="el-icon-delete" size="mini"></el-button> <el-tooltip Effect ="dark" content=" placement "="top-start" :enterable="false"> <el-button type="warning" icon="el-icon-setting" size="mini"></el-button> </el-tooltip> </template> </el-table-column> </el-table> <! -- bb0 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> <! Sync =" AddDialogVisible "width="50%" @Close =" AddDialogVisible "> <! -- body area --> <el-form :model="addForm" :rules="addFormRules" ref=" addFormref "label-width="70px"> <el-form-item label=" username" ></el-input> </el-form-item> <el-form-item label=" password" Prop ="password"> <el-input v-model=" addform.password "></el-input> </el-form-item> <el-form-item label=" Email "> <el-input v-model="addForm.email"></el-input> </el-form-item> <el-form-item label=" phone "prop="mobile"> <el-input v-model="addForm.mobile"></el-input> </el-form-item> </el-form> <! > <span slot="footer" class="dialog-footer"> <el-button @click="addDialogVisible = false"> delete </el-button> <el-button type="primary" @click="addUser"> </el-button> </span> </el-dialog> </div> </template>Data initialization, data validation, and business logic processing module
Data () {var checkEmail = (rule, value, Cb) = > {const regEmail = / ^ [a - zA - Z0-9 _. -] + @ [a zA - Z0-9 -] + (\. [a zA - Z0-9 -] +) * \. [a zA - Z0-9] {2, 6} $/ if Var checkMobile = (rule, value) {return CB ()} CB (new Error(' Please enter a valid email '))} var checkMobile = (rule, value)) {return CB ()} cb) => { const regMobile = /^(0|86|17951)? (13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/ if (regMobile.test(value)) { return cb() } cb(new Error(' Please enter valid phone number ')} return {// Get the user list parameter object QueryInfo: {query: '', // Current page number pagenum: 1, // Current page number pagesize: 2}, userList: [], total: 0, // Control add user dialog display and hide addDialogVisible: false, // Add user form data addForm: {username: "", password: AddFormRules: {username: [{required: true, message: 'Please enter username ', trigger: 'blur'}, {min: 3, Max: 10, message: 'username length between 3-10 characters ', trigger: 'blur'}], password: [{required: true, message: 'Please enter a password ', trigger: 'blur'}, {min: 6, Max: 15, message:' Password length between 6-15 characters ', trigger: 'blur'}], email: [{required: True, message: 'Please type email ', trigger: 'blur'}, {validator: checkEmail, trigger: 'blur'}], mobile: [{required: True, message: 'Please type the phone ', trigger: 'blur'}, {validator: checkMobile, trigger: 'blur' } ] } } }, created () { this.getUserList() }, methods: { async getUserList () { const { data: res } = await this.$http.get('users', { params: this.queryInfo }) if (res.meta.status ! == 200) return this.$message.error(res.meta.msg) console.log(res) this.userList = res.data.users this.total = res.data.total }, {this.queryInfo.PageSize = newSize this.getUserList(); // Listen.getUserList () {this.queryInfo. console.log(newSize) }, HandleCurrentChange (newPage) {this.queryInfo.pagenum = newPage this.getUserList() console.log(newPage) {this.queryInfo.pagenum = newPage this.getUserList() console.log(newPage); }, // modify user state async userStatechanged (userInfo) {const {data: res } = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`) if (res.meta.status ! == 200) { userInfo.mg_state = ! userInfo.mg_state return this.$message.error(res.meta.msg) } this.$message.success(res.meta.msg) }, / / listen to add users to the closure of the dialog box async event addDialogClosed () {/ / reset form this. $refs. AddFormRef. ResetFields ()}, / / click on the button, AddUser () {this.$refs.addFormRef. Validate (async valid => {if (! Const {data: res} = await this.$http.post('users', this.addForm) if (res.meta.status! == 201) return this.$message.error(res.meta.msg) // Add this.$message.success(res.meta.msg) // Hide this This.addDialogVisible = false // refresh user list this.getUserList()})}Too late. I’ll continue tomorrow