The problem of multi-selection editing and echo display of select selector in element-ui?

when el-select is added, it is displayed in the form of Tag. The new operation and editing operation are in the same file operation, not separately. When editing the data according to id, the display is displayed in the form of the drop-down, rather than in the form of Tag. It is strange that both the new operation and editing are operated in the same way, so why are they not the same? Secondly, select multiple selection is queried according to id. After the query, do you re-obtain the list of all the select of the query? However, the list that queries all select will overwrite the current bar of the previous query based on id, which will cause the query to have no effect

<el-select class="input_width" value-key="id" v-model="form.userIds" multiple collapse-tags placeholder="">
    <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id">
    </el-option>
</el-select>

form: {
    startTime: "",
    endTime: "",
    type: "",
    target: "",
    userIds: [],
    lineId: "",
    remark: "",
    published: "",
    orgId: ""
},


created() {
    this.initPatrolPlan();
},
methods: {
    // 
    getPatrolUser() {
      this.$http.get(this.$api.userList).then(res => {
            this.userList = res.data.data.userList;
      });
    },
    // 
    editPatrolPlan() {
         this.$http
          .get(this.$api.patrolPlan + this.multipleSelection[0].id)
          .then(res => {
              console.log("res", res);
              this.form = res.data.data.plan;
              this.userList = res.data.data.plan.users;
              // select, select, ?
              // this.getPatrolUser();
          });
    }
}

type select when editing
clipboard.png

select
clipboard.png

,
clipboard.png

select,
clipboard.png

May.08,2021
Menu