ElementUI的select選擇器的坑(單選，多選)

前言

element的組件是挺方便和簡潔的，但是我在項目中遇到了關於它的很多坑，官網的文字過於官方和簡潔，以至於經常犯摸不着頭腦的問題，這篇總結下我遇到的select選擇器的坑。

單選功能

在另一篇博客講到了下拉框的綁值問題，我的下拉框動態綁值時出現了輸入框內綁定了value值的情況，在我另一篇有講：下拉框組件el-select在編輯對話框中直接顯示option的value值而非選中綁定值選項

通過在選擇器的change事件中加入 this.$forceUpdate(); 解決。

多選功能

這個坑就很煩了，我找了很久的錯，走了很多的彎路。

首先是無法在彈出的對話框中綁值的情況

因為缺少了最重要的屬性：value-key（如果 Select 的綁定值為對象類型，請務必指定 value-key 作為它的唯一性標識。）

          <!-- 小心這里的required屬性將會覆蓋自定義的驗證規則！-->
          <el-form-item label="選擇角色" prop="roleId" :label-width="formLabelWidth">
            <input type="hidden" name="empId" :value="uroleForm.empId" />
            <!-- 大坑，value-key屬性-->
            <el-select v-model="uroleForm.roleId" value-key="roleId" clearable filterable multiple placeholder="請選擇用戶角色">
              <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId">
              </el-option>
            </el-select>
          </el-form-item>

clearable：使當前下拉框具有清空的功能，默認false

filterable：使當前下拉框具有搜索的功能，默認false

在動態綁值時要注意key屬性也是必須的。

這個 value-key 屬性什么意思呢，就是這個組件會根據這個屬性去綁定你所給的數據，所以在多選情況下這個屬性是必須的，也可以把它當作下拉框的value值。

這樣我解決了第一個問題，但是新問題也來了：

在對話框中綁定了value值而非選中標簽 

值是綁定成功了，但是它綁定的value而我想要的形式，於是我想到了方法：

          let temp = row.roles == null ? [] : row.roles.split(",");
          let arr = [];
          for (var i = 0; i < temp.length; i++) {
            if (this.roleOptions.length > 0)
              this.roleOptions.forEach(item => {
                if (item.roleId == temp[i]) arr.push(item.roleName)
              });
          }
          this.uroleForm.roleId = arr;

然后標簽可以正常顯示了：

 在新增權限時遇到的問題

 我給用戶指定了六個角色，但是發送請求后台報錯，並在控制台打印了請求參數如下：

 這我就很迷了，我覺得可能是數據雙向綁定的問題，因為Vue官方有說過data無法檢測到數組及對象的屬性變化從而影響DOM，需要自己手動通過Vue.$set方法賦值從而影響DOM。

從數據方面入手我的解決方案如下：

            //獲取到值
            let arr = [];
            for (var i = 0; i < this.uroleForm.roleId.length; i++) {
              this.roleOptions.forEach(item=>{
                if(this.uroleForm.roleId[i]==item.roleName||this.uroleForm.roleId[i]==item.roleId)
                  arr.push(item.roleId);
              })
            }    

獲取到的值：

 可以看到符合我要的數據標准了，發送請求也已成功，希望可以幫助他人避免一些坑把！

補充解決

這個彎路是我自己走的，以上的錯誤經過我的排查后發現是由於后台傳遞值的類型與下拉框中的value值類型不匹配造成的（就是數字和字符串不匹配），這么個問題居然搞了半天，記錄一下自己的踩坑把。