Element UI 用户管理页面：增删改查、分页和数据存储

以下是使用 Element UI 实现用户管理页面的示例代码，包含用户数据列表展示、增删改查功能、分页处理以及数据存储（服务端 JSON 文件或变量）。

HTML：

<template>
  <div>
    <el-input v-model='searchText' placeholder='搜索用户'></el-input>
    <el-button type='primary' class='add-btn' @click='addUser'>添加用户</el-button>
    <el-table :data='tableData' v-loading='loading' stripe>
      <el-table-column prop='name' label='用户姓名'></el-table-column>
      <el-table-column prop='phone' label='电话'></el-table-column>
      <el-table-column prop='email' label='邮箱'></el-table-column>
      <el-table-column prop='address' label='地址'></el-table-column>
      <el-table-column label='操作'>
        <template slot-scope='{ row }'>
          <el-button type='text' @click='editUser(row)'>编辑</el-button>
          <el-button type='text' @click='deleteUser(row)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
      :current-page='currentPage'
      :page-sizes='[10, 20, 50]'
      :page-size='pageSize'
      :total='total'
      layout='total, sizes, prev, pager, next, jumper'
    ></el-pagination>
    <el-dialog :visible.sync='dialogVisible' title='添加/编辑用户'>
      <el-form :model='form' :rules='rules' ref='form'>
        <el-form-item label='用户姓名' prop='name'>
          <el-input v-model='form.name'></el-input>
        </el-form-item>
        <el-form-item label='电话' prop='phone'>
          <el-input v-model='form.phone'></el-input>
        </el-form-item>
        <el-form-item label='邮箱' prop='email'>
          <el-input v-model='form.email'></el-input>
        </el-form-item>
        <el-form-item label='地址' prop='address'>
          <el-input v-model='form.address'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='dialogVisible = false'>取消</el-button>
        <el-button type='primary' @click='submitForm'>确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

JavaScript：

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      loading: false,
      searchText: '',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      form: {
        name: '',
        phone: '',
        email: '',
        address: '',
      },
      rules: {
        name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^[0-9]{11}$/, message: '请输入11位有效电话', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效邮箱', trigger: 'blur' },
        ],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  computed: {
    filteredData() {
      const searchText = this.searchText.trim().toLowerCase();
      return this.tableData.filter(
        (item) =>
          item.name.toLowerCase().includes(searchText) ||
          item.phone.toLowerCase().includes(searchText) ||
          item.email.toLowerCase().includes(searchText) ||
          item.address.toLowerCase().includes(searchText)
      );
    },
  },
  methods: {
    ...mapActions(['addUser', 'editUser', 'deleteUser', 'fetchData']),
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          if (this.form.id) {
            this.editUser(this.form);
          } else {
            this.addUser(this.form);
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

此示例代码使用 Vue.js 和 Vuex，需要安装并配置好相应的依赖。数据来源可以是服务端的 JSON 文件或者服务端定义的变量，需要在 Vuex 中定义对应的数据操作方法。对于分页的处理，可以使用 Element UI 提供的分页组件和相关事件实现。用户数据的增删改查可以通过调用相应的 Vuex 方法实现，同时需要在页面中显示对应的对话框组件来输入和编辑用户数据。在表格中使用 Element UI 的 table 和 table-column 组件展示用户数据，可以使用搜索框组件来查询用户数据。

以上代码仅作为示例，实际应用中需要根据具体需求进行修改和完善。