element ui 分页增删改查_vue利用elementUI创建列表以及增删改查和分页

vue利用elementUI创建列表以及增删改查和分页

首页

用户管理

用户列表

添加用户

class="margin-20"

v-loading="loading"

:data="userList"

border

style="width: 100%">

type="index"

width="50">

prop="username"

label="姓名"

width="180">

prop="email"

label="邮箱"

width="180">

prop="mobile"

label="电话">

//分页

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="1"

:page-sizes="[10, 20, 30, 40]"

:page-size="10"

layout="total, sizes, prev, pager, next, jumper"

:total="total">

取 消

确 定

取 消

确 定

{ {grantForm.username}}

v-for="(role, index) in roleList"

:key="index"

:label="role.roleName"

:value="role.id">

取 消

确 定

import {getUserList, changeUserState, addUser, getUserById, editUser, deleteUser, getRoleList, grantUserRole} from '@/api'

export default {

data () {

return {

loading: true,

userList: [],

query: '',

total: 0,

pagesize: 10,

pagenum: 1,

addDialogFormVisible: false,

addForm: {

username: '',

password: '',

email: '',

mobile: ''

},

editDialogFormVisible: false,

editForm: {

username: '',

email: '',

mobile: '',

id: 0

},

grantDialogFormVisible: false,

grantForm: {},

roleList: [],

roleId: ''