使用element ui添加一个用户管理的页面一条用户数据包含的字段有用户姓名、电话、邮箱、地址。需要在页面上呈现用户管理数据列表并且完成用户数据的增删改查以及数据分页的处理过程用户数据存储到服务端json文件或服务端定义变量中。

首先，需要安装 Element UI 组件库和 axios 库，可以使用以下命令安装：

npm install element-ui axios --save

然后，在需要使用用户管理页面的组件中，引入 Element UI 组件和 axios 库：

import { Table, TableColumn, Button, Dialog, Form, FormItem, Input, Message, Pagination } from 'element-ui'
import axios from 'axios'

接着，定义用户数据的字段和初始数据：

// 用户数据的字段
const fields = [
  { label: '姓名', prop: 'name' },
  { label: '电话', prop: 'phone' },
  { label: '邮箱', prop: 'email' },
  { label: '地址', prop: 'address' }
]

// 初始数据
const initData = [
  { name: '张三', phone: '13888888888', email: 'zhangsan@example.com', address: '北京市海淀区' },
  { name: '李四', phone: '13999999999', email: 'lisi@example.com', address: '上海市浦东新区' },
  { name: '王五', phone: '13666666666', email: 'wangwu@example.com', address: '广州市天河区' }
]

然后，定义组件的数据和方法：

export default {
  data () {
    return {
      // 用户数据
      data: [],
      // 当前页码
      currentPage: 1,
      // 每页显示的数据条数
      pageSize: 10,
      // 添加用户对话框是否可见
      addDialogVisible: false,
      // 编辑用户对话框是否可见
      editDialogVisible: false,
      // 当前编辑的用户数据
      editingUser: null,
      // 添加用户表单数据
      addForm: {
        name: '',
        phone: '',
        email: '',
        address: ''
      },
      // 编辑用户表单数据
      editForm: {
        name: '',
        phone: '',
        email: '',
        address: ''
      }
    }
  },
  components: {
    Table,
    TableColumn,
    Button,
    Dialog,
    Form,
    FormItem,
    Input,
    Pagination
  },
  created () {
    // 从服务端获取用户数据
    axios.get('/api/users')
      .then(res => {
        this.data = res.data
      })
      .catch(() => {
        // 获取数据失败时，使用初始数据
        this.data = initData
      })
  },
  methods: {
    // 添加用户
    addUser () {
      axios.post('/api/users', this.addForm)
        .then(res => {
          this.data.push(res.data)
          this.addDialogVisible = false
          Message.success('添加成功')
        })
        .catch(() => {
          Message.error('添加失败')
        })
    },
    // 编辑用户
    editUser () {
      axios.put(`/api/users/${this.editingUser.id}`, this.editForm)
        .then(res => {
          const index = this.data.findIndex(item => item.id === res.data.id)
          this.data.splice(index, 1, res.data)
          this.editDialogVisible = false
          Message.success('修改成功')
        })
        .catch(() => {
          Message.error('修改失败')
        })
    },
    // 删除用户
    deleteUser (user) {
      Dialog.confirm({
        title: '提示',
        message: `确定要删除${user.name}吗？`
      }).then(() => {
        axios.delete(`/api/users/${user.id}`)
          .then(() => {
            const index = this.data.findIndex(item => item.id === user.id)
            this.data.splice(index, 1)
            Message.success('删除成功')
          })
          .catch(() => {
            Message.error('删除失败')
          })
      })
    },
    // 显示添加用户对话框
    showAddDialog () {
      this.addDialogVisible = true
    },
    // 显示编辑用户对话框
    showEditDialog (user) {
      this.editingUser = user
      this.editForm = { ...user }
      this.editDialogVisible = true
    },
    // 分页改变事件
    handlePageChange (page) {
      this.currentPage = page
    }
  },
  computed: {
    // 当前页的用户数据
    currentPageData () {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.data.slice(start, end)
    }
  }
}

最后，在模板中使用组件：

<template>
  <div>
    <div>
      <Button type="primary" @click="showAddDialog">添加用户</Button>
    </div>
    <Table :data="currentPageData">
      <TableColumn v-for="field in fields" :key="field.prop" :prop="field.prop" :label="field.label"></TableColumn>
      <TableColumn label="操作">
        <template v-slot="scope">
          <Button type="text" size="small" @click="showEditDialog(scope.row)">编辑</Button>
          <Button type="text" size="small" @click="deleteUser(scope.row)">删除</Button>
        </template>
      </TableColumn>
    </Table>
    <Pagination :total="data.length" :page-size="pageSize" :current-page.sync="currentPage" @current-change="handlePageChange"></Pagination>
    <Dialog title="添加用户" :visible.sync="addDialogVisible" width="30%" @confirm="addUser">
      <Form :model="addForm">
        <FormItem label="姓名" prop="name">
          <Input v-model="addForm.name"></Input>
        </FormItem>
        <FormItem label="电话" prop="phone">
          <Input v-model="addForm.phone"></Input>
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input v-model="addForm.email"></Input>
        </FormItem>
        <FormItem label="地址" prop="address">
          <Input v-model="addForm.address"></Input>
        </FormItem>
      </Form>
    </Dialog>
    <Dialog title="编辑用户" :visible.sync="editDialogVisible" width="30%" :before-close="() => editingUser = null" @confirm="editUser">
      <Form :model="editForm">
        <FormItem label="姓名" prop="name">
          <Input v-model="editForm.name"></Input>
        </FormItem>
        <FormItem label="电话" prop="phone">
          <Input v-model="editForm.phone"></Input>
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input v-model="editForm.email"></Input>
        </FormItem>
        <FormItem label="地址" prop="address">
          <Input v-model="editForm.address"></Input>
        </FormItem>
      </Form>
    </Dialog>
  </div>
</template>

以上代码实现了一个简单的用户管理页面，包含用户数据的增删改查和数据分页处理，数据存储在服务端的 json 文件中。注意，这里只是一个示例代码，实际项目中需要根据具体情况进行修改和优化。