若依vue 前端的用户管理页面源码解析

1 查询条件关注gzh b站同名，有视频笔记 xml 体验AI代码助手代码解读复制代码

<el-form :model="queryParams" // 绑定表单数据对象，存储所有搜索条件 ref="queryForm" // 表单引用，可用于表单验证、重置等操作 size="small" // 表单组件尺寸：小尺寸 :inline="true" // 表单元素行内排列（横向布局） v-show="showSearch" // 根据showSearch布尔值控制表单显示/隐藏,这个是 label-width="68px" // 表单标签宽度统一设置为68px

搜索

<!-- 重置按钮 -->
<el-button 
  icon="el-icon-refresh"  // 刷新图标
  size="mini"             // 按钮尺寸：迷你
  @click="resetQuery"     // 点击触发重置方法
>重置</el-button>

1.1 v-show 的本质

Element-UI 的自带的属性是 model、ref、inline、label-width 等（这些是 el-form 组件封装的专属属性），而 v-show、v-if、v-for 等都是 Vue 框架层面的指令，所有标签 / 组件都能使用。 1.2el-form-item ini 体验AI代码助手代码解读复制代码

这个标签，里面的lable prop 是 elementui 的el-form-item 标签的属性，lable 是控制的前面的文字

prop 是要和这个字段前后端交互的名称一样，做验证 1.3 el-date-picker 日期范围 v-model="dateRange" arduino 体验AI代码助手代码解读复制代码 // 日期范围 dateRange: []

1.4 搜索 arduino 体验AI代码助手代码解读复制代码 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索

点击了这个按钮，走的逻辑是 ini 体验AI代码助手代码解读复制代码 /** 查询用户列表 */ getList() { this.loading = true; listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { this.userList = response.rows; this.total = response.total; this.loading = false; } ); },

这个就是调用后端接口进行查询数据，其中给后端传的参数，是需要进行组合之后传的 this.addDateRange(this.queryParams, this.dateRange) 这个方法是一个公共方法

用户名称这个输入框，绑定了查询参数的username ， @keyup.enter.native="handleQuery" 在这个组件上按下回车键时，执行 handleQuery 方法（通常是查询 / 搜索逻辑）”。 1.5 重置 1.6 总结说白了就是一个表单，根据用户输入的东西，去更改表单信息，然后点击按钮，调用一个方法去后端查询东西，把表单里面的东西传过去作为参数，获取到的东西再次放到 data 里面，页面从data 里面拿到东西之后展示。 2 按钮

对应的代码

xml 体验AI代码助手代码解读复制代码

plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']" >新增

2.1 权限这个按钮上有一个 v-hasPermi = "['system:user:add']" 是啥意思，这个 v-hasPermi 是什么，咋来的

项目里面自定义了这个，然后 main.js 引入

里面已经注册，全局使用

总结那就是自定义了这个指令，页面渲染的时候会自动的执行这个指令。这个指令里面逻辑就是判断当前用户的权限里面有没有这个，有就渲染这个dom 节点，没有就不渲染 2.2 新增

点击这个按钮，就调佣方法 handleAdd ini 体验AI代码助手代码解读复制代码 /** 新增按钮操作 */ handleAdd() { this.reset(); getUser().then(response => { this.postOptions = response.posts; this.roleOptions = response.roles; this.open = true; this.title = "添加用户"; this.form.password = this.initPassword; }); },

javascript 体验AI代码助手代码解读复制代码 // 表单重置 reset() { this.form = { userId: undefined, deptId: undefined, userName: undefined, nickName: undefined, password: undefined, phonenumber: undefined, email: undefined, sex: undefined, status: "0", remark: undefined, postIds: [], roleIds: [] }; this.resetForm("form"); },

先重置表单，然后访问后端接口，获取当前登录用户信息，获取到当前登录用户的岗位信息和角色信息 ini 体验AI代码助手代码解读复制代码 // 表单参数 form: {}, getUser().then(response => { this.postOptions = response.posts; this.roleOptions = response.roles; this.open = true; this.title = "添加用户"; this.form.password = this.initPassword; });

因为一点击新增按钮，就把open的值变成ture ,所以

这个地方就弹框了 el-dialog 标签里面的属性

titleDialog 的标题，也可通过具名 slot （见下表）传入append-to-bodyDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true，默认是false 详细拆解说明

visible：Element-UI el-dialog 组件的核心属性

visible 是组件自带的、必用的核心属性，作用是：

类型为布尔值（true/false），控制弹窗的显示（true）或隐藏（false）；是 Element-UI 为 el-dialog 封装的专属属性，其他组件（如 el-form、el-button）没有这个属性。

.sync：Vue 框架的语法糖（不是组件属性）

.sync 是 Vue 提供的修饰符，本质是对 “父子组件双向绑定” 的语法简化，和 el-dialog 组件本身无关：

没有 .sync 时，父组件给子组件传 visible 属性是单向绑定（父→子），子组件无法直接修改父组件的 open 变量；加上 .sync 后，相当于告诉 Vue：允许 el-dialog 组件内部触发事件来修改父组件的 open 变量（实现双向绑定）。

点击取消， @click="cancel" 走这个方法，

将开关关闭，重置表单点击确定，走 @click="submitForm" kotlin 体验AI代码助手代码解读复制代码 /** 提交按钮 */ submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.userId != undefined) { updateUser(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addUser(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); },

先验证表单信息，之后要么更新，要么新增

配置了这个，页面展示这个字段是必填项。

配置了各个字段的规则 2.3 修改 ini 体验AI代码助手代码解读复制代码 <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']" >修改

点击这个按钮，会走handleUpdate 这个方法 kotlin 体验AI代码助手代码解读复制代码 /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const userId = row.userId || this.ids; getUser(userId).then(response => { this.form = response.data; this.postOptions = response.posts; this.roleOptions = response.roles; this.$set(this.form, "postIds", response.postIds); this.$set(this.form, "roleIds", response.roleIds); this.open = true; this.title = "修改用户"; this.form.password = ""; }); },

$set 是 Vue 框架给所有 Vue 实例（组件实例就是 Vue 实例）挂载的全局方法，也可以写成 Vue.set（全局调用），this.$set 是组件内的简写形式（this 指向当前组件实例）。 this：当前 Vue 组件实例（比如在 methods 里的方法中，this 指向组件）； $set：Vue 实例的内置方法； this.form：要操作的目标对象（比如表单数据对象）； "postIds"：要添加 / 修改的属性名（字符串形式）； response.postIds：要给 postIds 属性赋值的值（比如接口返回的岗位 ID 数组）。 2.4 删除 2.5 导入 2.6 导出 3 通用表格右侧工具栏组件

这个是第三方的组件 less 体验AI代码助手代码解读复制代码 <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns">

4 列表展示

直接使用了elementui 里面的组件

将数据进行渲染

https://infogram.com/9862pdf-1h0r6rzw55d1w4e https://infogram.com/9862pdf-1h9j6q75kke754g https://infogram.com/9862pdf-1h0r6rzw55mkl4e https://infogram.com/9862pdf-1h0n25opllv0l4p https://infogram.com/9862pdf-1h7v4pd088yyj4k https://infogram.com/9862pdf-1h1749wqmmzvl2z https://infogram.com/9862pdf-1h7v4pd088l984k https://infogram.com/9862pdf-1hxj48mqeegrq2v https://infogram.com/9862pdf-1hmr6g8jzzxjo2n https://infogram.com/9862pdf-1hnp27eqyyd7y4g