javascript - elementui input帶提示框 選取傳參問題

Question

最近用了elementui做項目，遇到一些問題。

需求：選取提示內容之後 給datatable對應行row的id賦值，（後台要求傳id，不傳input的值）。

問題：自訂table嵌套 帶提示的input，select函數api上自帶一個參數，我額外加入一個參數row之後，就取得不到目前的選取的資料？

<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

你這種思路還是老的思路，沒有享受 VueJS 的大法。

Autocomplete 組件，當你選擇以後，直接就會把 Value 賦值給你的 v-model="scope.row.id" 的了。所以你的疑問 疑問是如何把選取的值id傳給目前的row的id？ 不是疑問。

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

我根據的你的程式碼，弄了一個可執行的，你看下，如果理解不正確，及時指出。

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