javascript - elementui input with prompt box select parameter passing problem

Question

I recently used elementui for a project and encountered some problems.

Requirement: After selecting the prompt content, assign a value to the id of the corresponding row in the datatable (the background requires the id to be passed, not the input value).

Question: Custom table nesting has a prompt input, and the select function api comes with a parameter. After I add an additional parameter row, I cannot get the current selected data?

<el-table-column align="center" prop="futuresContractId" label="采购合约" width="120">          
          <template scope="scope">
                 <el-autocomplete
                               class="inline-input1"
                               v-model="scope.row.id"
                              :value="scope.row.futuresContractId"
                              :fetch-suggestions="querySearch"
                               placeholder="请输入"
                               :trigger-on-focus="false"
                              @select="handleSelect(scope.row)"
                           >
                   </el-autocomplete>
          </template>
  </el-table-column>
  

 querySearch(queryString, cb) {
        var restaurants = [
            {id:2,name:"M1701",value:"M1701"},
            {id:4,name:"M1705",value:"M1705"}
            {id:8,name:"M1709",value:"M1709"}
        ];
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
        cb(results);
     },
     createFilter(queryString) {
       return (restaurant) => {
         return (restaurant.value.indexOf(queryString.toLowerCase()) >= 0);
       };
     },
     handleSelect(row) {
       console.log(row) //？这里可以把当前行row传过来，疑问是如何把选中的值id传给当前的row的id？
       //如不带参数过来，默认参数就是选中的restaurants元素
       },
  
  
  

Answer 1

Your way of thinking is still an old way of thinking, and you have not enjoyed the magic of VueJS.

The

Autocomplete component, when you select it, will directly assign the Value to your v-model="scope.row.id". So your question The question is how to pass the selected value id to the current row id? Not a question.

handleSelect(row) {
    // 默认参数就是当前的row
     // row 的 ID 已被改变，无需手动处理
}

I made an executable based on your code. Please take a look. If you don’t understand it correctly, please point it out in time.

https://jsfiddle.net/j6toc479/3/