最近用了elementui做項目,遇到一些問題。
需求:選取提示內(nèi)容之後 給datatable對應(yīng)行row的id賦值,(後臺要求傳id,不傳input的值)。
問題:自訂table嵌套 帶提示的input,select函數(shù)api上自帶一個參數(shù),我額外加入一個參數(shù)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;
// 調(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ù)過來,默認(rèn)參數(shù)就是選中的restaurants元素
},
閉關(guān)修行中......
你這種思路還是老的思路,沒有享受 VueJS
的大法。
Autocomplete
組件,當(dāng)你選擇以後,直接就會把 Value
賦值給你的 v-model="scope.row.id"
的了。所以你的疑問 疑問是如何把選取的值id傳給目前的row的id?
不是疑問。
handleSelect(row) {
// 默認(rèn)參數(shù)就是當(dāng)前的row
// row 的 ID 已被改變,無需手動處理
}
我根據(jù)的你的程式碼,弄了一個可執(zhí)行的,你看下,如果理解不正確,及時指出。
https://jsfiddle.net/j6toc479/3/