vue.js - 在 Quasar 表上获取当前 ID

Question

早上好，

我正在尝试在 Quasar 表中执行和编辑功能。它按预期工作，但是当我在表中有多个条目时，它默认为最后一个条目。

使用 props 将行的值添加到组件中，我的问题是获取当前行。所以我的问题是单击按钮时如何获得正确的行？

代码下载

标签： vue.jsquasar

Answer 1

您可以使用props.row.

示例-

<q-table
          title="Treats"
          :data="data"
          :columns="columns"
          row-key="name"
        >
          <template v-slot:body-cell-name="props">
            <q-td :props="props">
              <div>
                <q-badge color="purple" :label="props.value"></q-badge>
                <q-btn icon="edit" dense flat size="sm" @click="EditData(props.row)"></q-btn>
              </div>

            </q-td>
          </template>
        </q-table>


  methods:{
    EditData(row){
      alert("hi")
      console.log(row);
      console.log(this.data.indexOf(row))
    }
  }

现在你有一行和indexof特定的行。您可以使用splice或替换特定索引上的元素。

Codepen - https://codepen.io/Pratik__007/pen/LYVjqXb

检查控制台。