Service scenario and problem description

There are two selectors in the editable table, the first select selector, when the selection changes, the second select selector selection and request the second selector drop-down list data, when the empty selector binding data, the second selector drop-down cannot be selected.

Code:

<el-table-column prop="transferCustomer"
                 width="200">
  <template slot-scope="scope">
    <el-select v-model="scope.row.transferCustomer"
               @change="getAddrList($event, scope.row)">
      <el-option v-for="item in transferDate"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
  </template>
</el-table-column>
<el-table-column prop="addressCodes"
                 width="200">
  <template slot-scope="scope">
    <el-select v-model="scope.row.addressCodes"
               multiple>
      <el-option v-for="item in addressCodeList"
                 :key="item"
                 :label="item"
                 :value="item">
      </el-option>
    </el-select>
  </template>
</el-table-column>
Copy the code

Problem code snippet:

getAddrList(val,row){
  row.addressCodes = []
}
Copy the code

Cause of the problem

Restricted by modern JavaScript (and deprecated Object.Observe), Vue cannot detect additions or deletions of Object attributes. Tips: In VUE, when you direct “on” an attribute or object that does not exist. Assign, or assign directly to index items that don’t exist in the array, and print from the console to see the data change, but not to update the view

The solution

1. You can add responsive properties to nested objects using the vue.set (Object, propertyName, value) method (current solution)

getAddrList(val,row){
  this.$set(row, 'addressCodes', [])
}
Copy the code

2. Use the vm.$forceUpdate() method to force the Vue instance to be re-rendered. Note that it affects only the instance itself and the children that insert slot content, not all children.

Tips: This is just one solution, it doesn’t work for my problem. As mentioned above, the business scenario of this method applies to the current SELECT selector, manually updating the binding value, and forcing a refresh of the current SELECT component when there is no response from the drop-down selection.

Afterword.

After the boss’s advice, found that js processing logic has a problem, non-existent attribute processing in advance, and then assign value to the list binding value, there will not be this problem. Of course, the above solution can also be used as a reference. After all, there are various business scenarios, and my modification plan may not be applicable to other scenarios.

getContractGoodsRel(params).then(res => { this.loading = false; / / / / the problem code enclosing contractGoodsList = res. Data. ContractGoodsList; // this.contractGoodsList.forEach(e => { // e.addressCodes = [] // e.isAddress = true; / /}); / / the optimized code res. Data. ContractGoodsList. ForEach (e = > {e.a ddressCodes = [] e.i sAddress = true; }) this.contractGoodsList = res.data.contractGoodsList });Copy the code

Refer to the article

Elder-ui drop – down option not available elder-UI drop – down option not available