如何在 vue-tables-2 中获取表行的索引

Question

我继承了别人使用 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" class="form-control">
    </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 是这两个问题的根源。有没有一种方法可以使用该包，但只获取行数据而不将其包装在另一个“行”中，有没有一种方法可以获得每行从零开始的数组索引？

Answer 1

有没有一种方法可以让我使用该包，但只获取行数据而不将其包装在另一个“行”中

是和不是。插槽道具（组件与其插槽共享的任何东西）始终作为单个对象共享。你是给变量命名的人。

所以在slot="columnZ" slot-scope="row" 的情况下（顺便说一下deprecated syntax - 当前语法是v-slot:columnZ="row"）

1. 您可以选择任何其他名称 - 可以是 row，而不是 props 或其他任何名称
2. 你得到的是整个对象 - { row: { keyA: value, keyB: value, etc }, index: 1 }（假设）

但是你可以将destructure的对象变成组件——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)

至于缺少的从零开始的索引 - 如果这是组件与插槽共享的内容，那么您几乎无能为力。组件处于控制之中。如果您真的需要它，只需在包含从零开始的索引的每一行中再添加一个键