我繼承了別人的使用 vue-tables-2 的 vue 代碼。表格看起來像這樣（非常非常簡化）......
<v-client-table :data="myRows" :columns="columns" :options="options">
<div slot="columnA" slot-scope="{row}">
<input type="text" v-model.trim="row.someKey" >
</div>
<div slot="etc"> ...
注意它是怎么說slot-scope="{row}"的，而不是slot-scope="row". 當我檢查行時，我發現每一行看起來像這樣......
{ row: { keyA: value, keyB: value, etc }, index: 1 },
{ row: { keyA: value, keyB: value, etc }, index: 2 }, etc
所以我猜原作者“解構”了該行以避免浪費擊鍵，如v-model.trim="row.row.someKey".
現在我正在添加一個新列，它使用行資料的行和陣列索引，像這樣......
<div slot="columnZ" slot-scope="row">
<p>col value is {{row.row.someOtherKey}} and index is {{row.index-1}}<p>
</div>
但我不喜歡row.row任何比原作者更好的東西，并且row.index是以計數給出的，而不是從零開始的陣列索引。
我認為 vue-tables-2 是這兩個問題的根源。有沒有一種方法可以使用該包，但只獲取行資料而不將其包裝在另一個“行”中，有沒有一種方法可以獲得每行從零開始的陣列索引？
uj5u.com熱心網友回復：
有沒有辦法我可以使用包但只獲取行資料而不將其包裝在另一個“行”中
是和不是。插槽道具（組件與其插槽共享的任何東西）始終作為單個物件共享。你是給變數命名的人。
所以在這種情況下slot="columnZ" slot-scope="row"（順便說一句，不推薦使用的語法- 當前語法是v-slot:columnZ="row"）
- 您可以選擇任何其他名稱 - 而不是
row它可以是props或其他任何名稱 - 你得到的是整個物件 -
{ row: { keyA: value, keyB: value, etc }, index: 1 }（假設）
但是您可以將物件解構為組件 -v-slot:columnZ="{ row, index }"
這與普通 JS 中的操作相同：
const obj = { row: { keyA: 1, keyB: "asdasd", }, index: 1 }
// here the names `row` and `index` are given by the names of 1st level properties
const { row, index } = obj
console.log(row)
console.log(index)
// it is possible to "rename" te variable
const { row: user } = obj
console.log(user)至于缺少的從零開始的索引 - 如果這是組件與插槽共享的內容，那么您幾乎無能為力。組件處于控制之中。如果您真的需要它，只需在包含從零開始的索引的每一行中再添加一個鍵
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/414174.html
標籤：
下一篇：v-slot添加新列名