Vue Element UI 之el-table表格数据列表显示和分页功能

实现：通过 el-table 显示表格，并填充数据，表格数据分页显示

主要：

• el-table：用于显示数据
• template ：作用域插槽
• el-pagination：用于分页

辅助：

• el-switch
• el-button
• el-tooltip

参考代码如下：

<!-- 在表格中显示用户信息 -->
<el-table :data="userlist" border stripe>
 <el-table-column type="index"></el-table-column>
 <el-table-column label="姓名" prop="username"></el-table-column>
 <el-table-column label="邮箱" prop="email"></el-table-column>
 <el-table-column label="电话" prop="mobile"></el-table-column>
 <el-table-column label="角色" prop="role_name"></el-table-column>
 <el-table-column label="状态" prop="mg_state">
   <!-- 插槽 --><!-- scope.row：获取到该行的数据对象 -->
   <template slot-scope="scope">
     <!-- 开关状态 --><!-- change 事件：当开关状态发生变化时触发 -->
     <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
   </template>
 </el-table-column>
 <el-table-column label="操作" width="180px">
   <!-- 插槽 -->
   <template slot-scope="scope">
     <!-- 修改按钮 -->
     <el-button @click="showEditDialog(scope.row.id)" type="primary" icon="el-icon-edit" size="mini"></el-button>
     <!-- 删除按钮 -->
     <el-button @click="removeUserById(scope.row.id)" type="danger" icon="el-icon-delete" size="mini"></el-button>
     <!-- 分配角色按钮 -->
     <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
       <el-button @click="setRole(scope.row)" type="warning" icon="el-icon-setting" size="mini"></el-button>
     </el-tooltip>
   </template>
 </el-table-column>
</el-table>
<!-- 分页模块 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
	:current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" 
	:page-size="queryInfo.pagesize" :total="total" 
	layout="total, sizes, prev, pager, next, jumper">
</el-pagination>

export default {
	data () {
	 return {
	 	// 获取用户列表的参数对象
		queryInfo: {
		   query: '',
		   // 当前的页数
		   pagenum: 1,
		   // 当前每页显示多少条数据
		   pagesize: 2
		 },
		total: 0,
	 	userlist: []
	 }
	},
	methods: {
		// 获取用户信息
	    async getUserList () {
	      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
	      if (res.meta.status !== 200) {
	        return this.$message.error('获取用户列表失败')
	      }
	      this.userlist = res.data.users
	      this.total = res.data.total
	    },
	    // 监听 pagesize 改变的事件
	    handleSizeChange (newSize) {
	      // 同步修改data中的pagesize
	      this.queryInfo.pagesize = newSize
	      // 重新发起数据请求
	      this.getUserList()
	    },
	    // 监听 页码值 改变的事件
	    handleCurrentChange (newPage) {
	      this.queryInfo.pagenum = newPage
	      this.getUserList()
	    },
	    // 监听 switch 开关状态的改变
	    async userStateChanged (userinfo) {
	      console.log(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('更新用户状态失败！')
	      }
	      this.$message.success('更新用户状态成功！')
	    }
    }
}