Vue element ui用户展示页面的实例

下面我将为你详细讲解“Vue element ui用户展示页面的实例”的完整攻略。

1. 环境配置

在开始使用Vue element ui之前，需要先进行环境配置。具体操作步骤如下：

1. 安装Node.js：在Node.js官网下载对应系统的安装包，安装完成后，在命令行中输入node -v查看是否安装成功；
2. 安装Vue CLI：在命令行中输入npm install -g @vue/cli来安装Vue CLI，输入vue --version查看是否安装成功。

2. 安装依赖

进入命令行界面，切换到项目目录下，执行以下命令安装依赖：

npm install element-ui --save
npm install axios --save

其中，element-ui是UI组件库，axios是用于发起HTTP请求的库。

3. 引入组件

在main.js文件中，引入element-ui和axios相关组件：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.$http = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

4. 编写展示页面

在App.vue文件中，编写用户展示页面。以下是一个示例代码：

<template>
  <div class="user-list">
    <el-table :data="users" fit border>
      <el-table-column prop="id" label="用户ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
          <el-button type="text" size="small" @click="deleteUser(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination :page-size="pageSize" :current-page.sync="currentPage" :total="total" layout="total, prev, pager, next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      // 发起HTTP请求获取数据
      this.$http.get('/api/users', {
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(response => {
        this.users = response.data.list
        this.total = response.data.total
      })
    },
    showDetail(row) {
      // 跳转到用户详情页面
      this.$router.push(`/user/${row.id}`)
    },
    deleteUser(row) {
      // 发起HTTP请求删除用户
      this.$http.delete(`/api/users/${row.id}`).then(() => {
        this.getUserList()
      })
    }
  }
}
</script>

<style>
.user-list {
  padding: 20px;
  box-sizing: border-box;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>

该页面展示了一个用户列表，其中包含了用户ID、姓名、手机号和操作列。操作列中的“详情”按钮点击后会跳转到该用户的详情页面，“删除”按钮点击后会删除该用户。每页展示10条数据，可以使用分页功能查看更多数据。

示例说明

这里提供两个示例说明。

示例1

将上述代码复制到你的Vue项目中，运行npm run serve命令启动服务。如果没有启动异常，则访问http://localhost:8080可以看到用户列表页面的展示效果，如果出现问题可以查看控制台。

示例2

如果你需要在用户列表页面加上搜索功能，可以参考以下代码：

<el-input placeholder="请输入关键字" v-model.trim="keyword" style="width: 200px; margin-right: 20px"></el-input>
<el-button type="primary" @click="getUserList">搜索</el-button>

在data中添加关键字keyword字段，修改getUserList方法：

getUserList() {
  this.$http.get('/api/users', {
    params: {
      currentPage: this.currentPage,
      pageSize: this.pageSize,
      keyword: this.keyword
    }
  }).then(response => {
    this.users = response.data.list
    this.total = response.data.total
  })
}

这样，用户就可以在页面上输入关键字进行搜索了。