vue 下拉选是多选的，并且回显

下拉选最重要的就是：下拉选的所有选项放在一个变量，选中的选项放在一个变量。

先加载所有选项的数据，再加载选中选项的数据，并且要保证select下拉的ID和v-model里边的id保持一致。

第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。

第二、要保证select下拉的ID和v-model里边的id保持一致。

第三、elementUI就会自动的将数据回显了。

代码：

<el-form-item label="选择学校">
            <Select v-model="user.school.id" value-key style="width:200px;"
                    @on-change="selectGradeAndEclass(user.school.id)">
              <Option v-for="item in userForm.schoolList" :value="item.id" :key="item.id" :label="item.name"></Option>
            </Select>
          </el-form-item>
          <el-form-item label="选择年级" value-key v-if="user.role.id == 6 || user.role.id == 7"> <!-- 多选 -->
            <Select v-model="user.gradeList" style="width:200px;" v-if="user.role.id == 6" multiple>
              <Option v-for="item in userForm.gradeList" :value="item.id" :key="item.id" :label="item.name"></Option>
            </Select>
            <Select v-model="user.gradeList" value-key style="width:200px;" v-if="user.role.id == 7">
              <Option v-for="item in userForm.gradeList" :value="item.id" :key="item.id" :label="item.name"></Option>
            </Select>
          </el-form-item>
          <el-form-item label="选择班级" value-key v-if="user.role.id == 8"> <!-- 多选 -->
            <Select v-model="user.eclassList" style="width:200px;" multiple>
              <Option v-for="item in userForm.eclassList" :value="item.id" :key="item.id">{{
                item.grade.name}}{{item.name}}
              </Option>
            </Select>
          </el-form-item>

 

export default {
    name: "manager",
    data() {
      return {
        //客户端用户相关变量开始
        userList: [],//客户端用户列表
        userquery: {//分页查询条件
          page: 1,
          limit: 10
        },
        userCount: 0,//分页总条数
        user: {//客户端用户
          id: null,//id
          username: null,//姓名
          phone: null,//手机号
          role: {},//角色
          school: {},//学校
          gradeList: [],//年级
          eclassList: [],//班级
          subjectList: []//科目
        },
        userForm: {
          roleList: [],
          schoolList: [],
          gradeList: [],
          eclassList: [],
          subject: []
        },

 // 编辑客户端用户
      editSaveUser(row) {
        let that = this;
        //初始化user
        this.user = JSON.parse(JSON.stringify(row));
        this.edituser = true;
        that.selectGradeEclass(row);
        that.selectSubject(row);
        this.disabled = true
      },
//根据学校选择年级和班级
      selectGradeEclass(row) {
        let that = this;
        let model = {
          'schoolId': row.school.id
        };
        eclass.listbyschool(model, res => {
          if (res.state) {
            that.userForm.eclassList = res.data.eClassList;
            that.userForm.gradeList = res.data.gradeList;
            if (row.gradeList != null && row.gradeList.length > 0) {
              for (let i = 0; i < row.gradeList.length; i++) {
                this.user.gradeList.push(row.gradeList[i].id);
              }
            }
            if (row.eclassList != null && row.eclassList.length > 0) {
              for (let i = 0; i < row.eclassList.length; i++) {
                this.user.eclassList.push(row.eclassList[i].id);
              }
            }
          } else {
            this.$Message.error(res.msg)
          }
        })
      },

转载地址：

https://www.cnblogs.com/xiaomili/p/6607627.html