开发喵星球

在若依前后端分离框架中，我们经常需要给下拉框设置默认值。对于刚接触的小伙伴来说，可能不知道从哪里下手。在本教程中，我们以用户管理模块中的添加用户功能为例，介绍如何设置用户性别的默认值为“男”。

在实际项目中，使用下拉框组件选择字典项是很常见的场景。这里我们主要关注如何在 el-select 组件中设定一个默认值，从而简化用户选择步骤。

解决思路

首先，定位到打开“新增用户”页面的代码逻辑。在该逻辑中，我们可以找到页面初始化的相关方法，其中包含一个 this.reset() 调用。这个方法用于重置表单项并设置初始值。以下是步骤解析：

1. 定位页面初始化方法
   在打开“新增用户”页面的触发方法中，你会找到 this.reset() 的调用位置。这个方法用于重置表单，并初始化各项字段值。

   

2. 在 reset 方法中设定默认值
   继续跟踪 this.reset() 方法，可以看到它的实现代码。为了设定用户性别的默认值，我们只需在此处为 sex 字段赋值 "0"，表示默认选择“男”。

   

   代码如下：

   reset() {
      this.form = {
          userId: undefined,
          deptId: undefined,
          userName: undefined,
          nickName: undefined,
          password: undefined,
          phonenumber: undefined,
          email: undefined,
          sex: "0", // 默认值设置为“男”
          status: "0",
          remark: undefined,
          postIds: [],
          roleIds: []
      };
      this.resetForm("form");
   }
   

在这个 reset() 方法中，通过将 sex 的值设定为 "0"，下拉框的默认选项就会自动选中“男”，这样用户在创建新用户时不需要再次手动选择性别，大大提高了操作的便利性。

总结

在若依框架中设置 el-select 下拉框的默认值非常简单。通过在页面初始化方法中为相关字段赋值，我们可以实现字典项的默认选中状态，优化用户体验。在实际应用中，大家可以根据需求灵活调整代码，确保表单字段的默认状态满足业务需求。