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

Question

继承了别人使用vue-tables-2的vue代码。 table 看起来像这样（非常非常简单）...

<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

Is there a way I can use the package but just get the row data without having it wrapped in another "row"

是也不是。插槽道具（组件与其插槽共享的任何内容）始终作为单个对象共享。您是为变量命名的人。

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

您可以选择任何其他名称 - 而不是 row，它可以是 props 或任何其他名称
你得到的是整个对象 - { 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)

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

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

How to get a table row's index in vue-tables-2

javascript

vue.js

vue-tables-2