el-select 动态value绑定踩坑

element UI + 表单回显 + 多选 +禁止重复选择 + 修改功能 +选择的bug处理

总结

总结放在前面：
el-select 与数据绑定，动态value绑定关系，怎样解决回显后绑定出错的问题

回显以后直接点击修改：
回显以后删掉一个点击修改：
回显以后删除完毕重新选择点击修改： 无bug
回显以后点击删除一个，又加上一个或多个在点击修改：

测试以为的简单，实际的繁琐 element UI + 表单回显 + 多选 +禁止重复选择 + 选择的bug处理

1. 首先实现表单数据回显，这个简单，只需对象浅拷贝
2. 然后实现select多选数据的回显，数据格式处理后，也可以轻松完成（无非就是字符串和数组的转化）
3. 完成修改功能，众所周知，下拉框不能重复选择，因此要禁用，这个禁用的状态是动态的。
   第一个难点：怎样动态改变呢（回显的数据已存在的禁止选择，那么去掉其中一个以后，对应的怎样改变状态，也许你会以为很简单，实际上，在select change事件中找到用户去掉的那一个，并将其禁用状态取反），难点就是怎么拿到用户删掉的那一个，change事件返回的是未删掉的，找到其他事件，轻松解决
4. 继续完成修改功能，现在是第二难点：change第一个参数是value，而不是id，WHAT?，我给它value或者id，value必须给，否则绑定不能成功，但是去掉其中呢，给后台的容器却变成了id。反之亦然。

涉及知识点与问题

绑定值与选中值的区别 （前后端协作分析后才能得到这个问题，解决掉这篇文章就就解决了）
value-key 的使用
对象属性的添加
:key 的作用
数据类型的互转
禁用状态动态改变
两种情况不同的解决方案

页面

代码

html

<td class="tab-title">项目性质：</td>
	 <td class="tab-content">
	     <el-form-item prop="propertyValue">
       		<el-select clearable placeholder="请选择要修改的项目性质" multiple v-model="editParams.propertyValue" @change="projectEditParams($event,1)" value-key="item.id" @remove-tag="remove($event)">
         <el-option v-for="item in archives.list2" :disabled="item.disabled" :key="item.id" :label="item.value" :value="item.id"></el-option>
       </el-select>
     </el-form-item>
   	</td>

js:

// 修改项目信息
      projectEditParams(value, index) {
        console.log('修改项', value)
        if (index == 0) {
          this.editParams.tradeId = value;
        } else if (index == 1) {
          this.editParams.propertyId = value;
        } else if (index == 2) {
          this.editParams.scaleId = value;
        } else if (index == 3) {
          this.editParams.stageId = value;
        } else if (index == 4) {
          this.editParams.areaId = value;
        } else if (index == 5) {
          this.editParams.levelId = value;
        } else if (index == 6) {
          this.editParams.userId = value;
        }
      },
      remove(value) {
        console.log(value)
       for(let j = 0; j < this.archives.list2.length;j++) {
          // 拿到用户删掉的那一个
          if(value == this.archives.list2[j].value) {
            this.archives.list2[j].disabled = !this.archives.list2[j].disabled
            console.log(this.archives.list2)
          }
        }
      },
      projectEdit(formName, index) {
        if (index == 0) {
          this.dialogFormReset = true;
          console.log(this.itemEditParams)
          this.editParams = {...this.itemEditParams}
          if(this.editParams.propertyValue) {
            this.editParams.propertyValue = this.editParams.propertyValue.split(' ');
            console.log(this.editParams.propertyValue)
            console.log(this.archives)
            for(let i = 0; i < this.editParams.propertyValue.length;i++) {
              for(let j = 0; j < this.archives.list2.length;j++) {
                if(this.editParams.propertyValue[i] == this.archives.list2[j].value) {
                  this.archives.list2[j].disabled = true;
                  console.log(this.archives)
                }
              }
            }
          }
          console.log('修改前的准备', this.editParams)
        } else if (index == 1) {
          if (this.editParams.expectTime) {
            this.editParams.expectTime = new Date(this.editParams.expectTime).getTime();
          }
          if (this.editParams.realTime) {
            this.editParams.realTime = new Date(this.editParams.realTime).getTime();
          }
           if(this.editParams.propertyId.length > 0) {
            console.log(this.editParams.propertyId)
            this.editParams.propertyId = this.editParams.propertyId.sort(function(a,b) {return a - b}).join()
          } else {
            this.editParams.propertyId = '';
          }
          // 补充代码-解决方案
          // 干就完了
          if(this.editParams.propertyValue) {
            let ids = [];
            for(let i = 0;i < this.editParams.propertyValue.length;i++) {
              let arr = [];
              let temp = '';
              temp = typeof this.editParams.propertyValue[i];
              if(temp != 'number') { // 非数字，值，过滤
                ids.push(this.archives.list2.filter(item => item.value == this.editParams.propertyValue[i])[0].id)
                console.log('非数字的id',ids)
              } else {
                ids.push(this.editParams.propertyValue[i])
                console.log('数字的id',ids)
              }
            }
            console.log('最终的id',ids)
            this.editParams.propertyId = ids.sort(function(a,b) {return a - b}).join();
          }
          // 补充代码-解决方案
          this.$refs[formName].validate((valid) => {
            console.log(valid)
            if (valid) {
              delete this.editParams.tradeValue
              delete this.editParams.propertyValue
              delete this.editParams.scaleValue
              delete this.editParams.areaValue
              delete this.editParams.stageValue
              delete this.editParams.username
              delete this.editParams.levelValue
              delete this.editParams.verifyContent;
              delete this.editParams.scheduleList;
              console.log('修改最终参数', this.editParams);
              api.projectEdit(this.editParams).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                  this.dialogFormReset = false;
                  this.$message.success('修改成功');
                  // this.$message.success(res.data.msg);
                  this.projectVerifyDetail();
                } else if (res.data.code == '400') {
                  this.dialogFormReset = false;
                  this.$message.warning(res.data.msg)
                }
                }).catch(err => {
                  console.log(err)
                }
              )
            } else {
              this.$message.warning('请正确填写相关内容');
              return false;
            }
          })
        } else {
          this.dialogFormReset = false;
          this.$message.info('已取消选择');
        }
      },

解决方案

绑定值与选中值的区别:
补充该段代码：

// 第一版 只解决部分bug
   let arr = [];
   let temp = '';
   temp = typeof this.editParams.propertyValue[0];
   console.log(temp == 'number')
   if(temp != 'number') {
     for(let i = 0;i < this.editParams.propertyValue.length;i++) {
       console.log(this.archives.list2.filter(item => item.value == this.editParams.propertyValue[i])[0].id)
       arr.push(this.archives.list2.filter(item => item.value == this.editParams.propertyValue[i])[0].id)
       this.editParams.propertyId = arr.join(',')
       console.log(this.editParams.propertyId)
     }
   }
   // 第二版 完美解决
  if(this.editParams.propertyValue) {
     let ids = [];
     for(let i = 0;i < this.editParams.propertyValue.length;i++) {
       let arr = [];
       let temp = '';
       temp = typeof this.editParams.propertyValue[i];
       if(temp != 'number') { // 非数字，值，过滤
         ids.push(this.archives.list2.filter(item => item.value == this.editParams.propertyValue[i])[0].id)
         console.log('非数字的id',ids)
       } else {
         ids.push(this.editParams.propertyValue[i])
         console.log('数字的id',ids)
       }
     }
     console.log('最终的id',ids)
     this.editParams.propertyId = ids.sort(function(a,b) {return a - b}).join();
   }