問題描述

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

需求：選中提示內(nèi)容之后 給datatable對應(yīng)行row的id賦值，（后臺要求傳id，不傳input的值）。

問題：自定義table嵌套 帶提示的input，select函數(shù)api上自帶一個參數(shù)，我額外添加一個參數(shù)row之后，就獲取不到當(dāng)前的選中的數(shù)據(jù)？

<el-table-column prop='futuresContractId' label='采購合約' width='120'> <template scope='scope'> <el-autocomplete 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; // 調(diào)用 callback 返回建議列表的數(shù)據(jù)cb(results); }, createFilter(queryString) { return (restaurant) => { return (restaurant.value.indexOf(queryString.toLowerCase()) >= 0); }; }, handleSelect(row) { console.log(row) //？這里可以把當(dāng)前行row傳過來，疑問是如何把選中的值id傳給當(dāng)前的row的id？ //如不帶參數(shù)過來，默認參數(shù)就是選中的restaurants元素 },

問題解答

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

Autocomplete 組件，當(dāng)你選擇以后，直接就會把 Value 賦值給你的 v-model='scope.row.id' 的了。所以你的疑問 疑問是如何把選中的值id傳給當(dāng)前的row的id？ 不是疑問。

handleSelect(row) { // 默認參數(shù)就是當(dāng)前的row // row 的 ID 已被改變，無需手動處理}

我根據(jù)的你的代碼，弄了一個可執(zhí)行的，你看下，如果理解不正確，及時指出。

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