标签：pageIndex vue http val getDataList user data id

<template>   <div class="mod-user">     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">       <el-form-item>         <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>       </el-form-item>       <el-form-item>         <el-button @click="getDataList()">查询</el-button>         <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>         <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>       </el-form-item>     </el-form>     <el-table       :data="dataList"       border       v-loading="dataListLoading"       @selection-change="selectionChangeHandle"       style="width: 100%;">       <el-table-column         type="selection"         header-align="center"         align="center"         width="50">       </el-table-column>       <el-table-column         prop="userId"         header-align="center"         align="center"         width="80"         label="ID">       </el-table-column>       <el-table-column         prop="username"         header-align="center"         align="center"         label="用户名">       </el-table-column>       <el-table-column         prop="email"         header-align="center"         align="center"         label="邮箱">       </el-table-column>       <el-table-column         prop="mobile"         header-align="center"         align="center"         label="手机号">       </el-table-column>       <el-table-column         prop="status"         header-align="center"         align="center"         label="状态">         <template slot-scope="scope">           <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>           <el-tag v-else size="small">正常</el-tag>         </template>       </el-table-column>       <el-table-column         prop="createTime"         header-align="center"         align="center"         width="180"         label="创建时间">       </el-table-column>       <el-table-column         fixed="right"         header-align="center"         align="center"         width="150"         label="操作">         <template slot-scope="scope">           <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>           <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>         </template>       </el-table-column>     </el-table>     <el-pagination       @size-change="sizeChangeHandle"       @current-change="currentChangeHandle"       :current-page="pageIndex"       :page-sizes="[10, 20, 50, 100]"       :page-size="pageSize"       :total="totalPage"       layout="total, sizes, prev, pager, next, jumper">     </el-pagination>     <!-- 弹窗, 新增 / 修改 -->     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>   </div> </template>
<script>   import AddOrUpdate from './user-add-or-update'   export default {     data () {       return {         dataForm: {           userName: ''         },         dataList: [],         pageIndex: 1,         pageSize: 10,         totalPage: 0,         dataListLoading: false,         dataListSelections: [],         addOrUpdateVisible: false       }     },     components: {       AddOrUpdate     },     activated () {       this.getDataList()     },     methods: {       // 获取数据列表       getDataList () {         this.dataListLoading = true         this.$http({           url: this.$http.adornUrl('/sys/user/list'),           method: 'get',           params: this.$http.adornParams({             'page': this.pageIndex,             'limit': this.pageSize,             'username': this.dataForm.userName           })         }).then(({data}) => {           if (data && data.code === 0) {             this.dataList = data.page.list             this.totalPage = data.page.totalCount           } else {             this.dataList = []             this.totalPage = 0           }           this.dataListLoading = false         })       },       // 每页数       sizeChangeHandle (val) {         this.pageSize = val         this.pageIndex = 1         this.getDataList()       },       // 当前页       currentChangeHandle (val) {         this.pageIndex = val         this.getDataList()       },       // 多选       selectionChangeHandle (val) {         this.dataListSelections = val       },       // 新增 / 修改       addOrUpdateHandle (id) {         this.addOrUpdateVisible = true         this.$nextTick(() => {           this.$refs.addOrUpdate.init(id)         })       },       // 删除       deleteHandle (id) {         var userIds = id ? [id] : this.dataListSelections.map(item => {           return item.userId         })         this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {           confirmButtonText: '确定',           cancelButtonText: '取消',           type: 'warning'         }).then(() => {           this.$http({             url: this.$http.adornUrl('/sys/user/delete'),             method: 'post',             data: this.$http.adornData(userIds, false)           }).then(({data}) => {             if (data && data.code === 0) {               this.$message({                 message: '操作成功',                 type: 'success',                 duration: 1500,                 onClose: () => {                   this.getDataList()                 }               })             } else {               this.$message.error(data.msg)             }           })         }).catch(() => {})       }     }   } </script>

标签：pageIndex,vue,http,val,getDataList,user,data,id
来源： https://www.cnblogs.com/daofree/p/14749298.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。