Vue el-table 嵌套el-select

一、el-table 里面嵌套el-select 互不影響

前提：el-select是多選，當前如果有默認值要展示在el-select上面

<el-table-column prop="configurationList" header-align="center" align="center" label="配置" width="220">
        <template slot-scope="scope">
              <el-select v-model="scope.row.configurationChecked" clearable placeholder="請選擇配置" @change="handleChangeConfig(scope.row,scope.$index)" value-key="index" filterable multiple>
              <el-option v-for="(item,index) in scope.row.configurationList"
                :key="index" :label="item.configuration" :value="item"></el-option>
              </el-select>
          </template>
</el-table-column>

1、多選綁定的是數組。 

2、如果當前有默認值，只要默認先放到  scope.row.configurationChecked 這個數組里面就可以

查詢列表，需要把默認值展示出來

handleCode(){
        this.dataListLoading = true
      this.$http.get(`${window.SITE_CONFIG['baseURL']}/lclb/demand/getGoodsInfo`, {
              params:{
                "goodsCode":this.dataForm2.goodsCode
              }
            }).then(data => {
              this.goodsList = data.result.data
              if (data.result.data){
              data.result.data.forEach((item, index) => {
                if (item.editionList.length > 0) {
                  item.editionList.forEach((item2) => {
                    if (item2.defSelect === '1'){
                      this.goodsList[index].edition = item2.edition
                      // this.dataForm2.edition = item2.edition
                    }
                  })
                }
                item.configurationChecked = []
                if (item.configurationList.length > 0){
                  item.configurationList.forEach((item3, ind) => {
                    if (item3.defSelect === '1'){  // 等於1當前選項為默認值，把它放進configurationChecked的數組里面
                      let obj = {
                        configuration : item3.configuration,
                        defSelect:item3.defSelect,
                        index: item3.index
                      }
                     let newList = this.goodsList[index].configurationChecked.push(obj)
                      // item.configurationChecked.push(item3.configuration)
                      this.$set(this.goodsList[index], item.configurationChecked, newList)  // 設置當前第幾行的默認值
                      this.$forceUpdate()
                    }
                  })
                }
              })
              }
              this.dataListLoading = false
            })
      },

3、遇到問題：當默認值展示之后，當前el-select多選框綁定的是數組 ，會發現下拉列表不好用了

解決： 因為多選的時候綁定的是數組，而Vue並不能夠監聽到數組的改變。

handleChangeConfig(row, index){
        // row.configurationChecked = [...row.configurationChecked]
        row.configurationList = [...row.configurationList] // 把下拉列表數組重新賦值，強制更新
      },