当前位置：首页 > VUE

vue实现机构用户

2026-02-20 05:13:52VUE

Vue实现机构用户管理功能

环境准备 确保已安装Node.js和Vue CLI。使用以下命令创建Vue项目：

vue create organization-management
cd organization-management

安装必要依赖 Axios用于API请求，Element UI提供UI组件：

npm install axios element-ui

项目结构

src/
├── api/
│   └── organization.js    # API接口封装
├── components/
│   └── OrgDialog.vue      # 新增/编辑机构弹窗
├── views/
│   └── Organization.vue   # 机构管理主页面
├── router/
│   └── index.js           # 路由配置
└── store/
    └── modules/           # Vuex模块
        └── org.js

核心代码实现

API层封装 (organization.js)

vue实现机构用户

import axios from 'axios';

const api = {
  getOrgList(params) {
    return axios.get('/api/organizations', { params });
  },
  createOrg(data) {
    return axios.post('/api/organizations', data);
  },
  updateOrg(id, data) {
    return axios.put(`/api/organizations/${id}`, data);
  },
  deleteOrg(id) {
    return axios.delete(`/api/organizations/${id}`);
  }
};

export default api;

Vuex状态管理 (org.js)

const state = {
  orgList: [],
  pagination: {
    page: 1,
    pageSize: 10,
    total: 0
  }
};

const mutations = {
  SET_ORG_LIST(state, list) {
    state.orgList = list;
  },
  UPDATE_PAGINATION(state, pagination) {
    state.pagination = { ...state.pagination, ...pagination };
  }
};

const actions = {
  async fetchOrgList({ commit, state }) {
    const res = await api.getOrgList({
      page: state.pagination.page,
      size: state.pagination.pageSize
    });
    commit('SET_ORG_LIST', res.data.list);
    commit('UPDATE_PAGINATION', { total: res.data.total });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

主页面组件 (Organization.vue)

vue实现机构用户

<template>
  <div class="org-container">
    <el-button type="primary" @click="showDialog">新增机构</el-button>

    <el-table :data="orgList" border>
      <el-table-column prop="name" label="机构名称"></el-table-column>
      <el-table-column prop="code" label="机构代码"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button @click="editOrg(row)">编辑</el-button>
          <el-button @click="deleteOrg(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handlePageChange"
      :page-size="pagination.pageSize"
      :total="pagination.total">
    </el-pagination>

    <org-dialog 
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :formData="currentOrg"
      @submit="handleSubmit">
    </org-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import OrgDialog from '@/components/OrgDialog';

export default {
  components: { OrgDialog },
  computed: {
    ...mapState('org', ['orgList', 'pagination'])
  },
  methods: {
    ...mapActions('org', ['fetchOrgList']),
    showDialog() {
      this.currentOrg = {};
      this.dialogVisible = true;
    }
  },
  created() {
    this.fetchOrgList();
  }
};
</script>

表单验证处理

在机构表单组件中添加验证规则：

data() {
  return {
    rules: {
      name: [
        { required: true, message: '请输入机构名称', trigger: 'blur' },
        { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
      ],
      code: [
        { pattern: /^[A-Za-z0-9]+$/, message: '只能包含字母和数字' }
      ]
    }
  };
}

性能优化建议

表格数据分页加载，避免一次性请求大量数据
使用防抖处理搜索输入框的实时查询
对频繁访问的数据添加本地缓存
采用懒加载方式引入第三方组件库

常见问题解决方案

机构树形结构展示 使用递归组件实现多级机构展示：

<template>
  <div class="tree-node">
    <div @click="toggle">{{ node.name }}</div>
    <div v-show="expanded" v-for="child in node.children" :key="child.id">
      <org-tree :node="child"></org-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrgTree',
  props: ['node'],
  data() {
    return { expanded: false };
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    }
  }
};
</script>

数据权限控制 在Vuex中实现基于角色的数据过滤：

// store/modules/user.js
const actions = {
  filterOrgList({ commit, rootState }, list) {
    if (rootState.user.role === 'admin') {
      return list;
    }
    return list.filter(item => item.visible === true);
  }
};