如何使用 Quasar 在数据 table editable onclick 特定行中创建单元格？

Question

我正在使用 Quasar 中的 data table 组件。我可以查看 table，这太棒了。这是

现在我需要点击一个行单元格并将其设为 editable 输入文本字段，然后在按下“Enter”按钮后我需要将数据保存在那里。如何进行下一步？请帮助我。

Answer 1

首先，我没有找到数据 table 的任何内置功能来编辑行。所以我想到了使用我的自定义功能。 Quasar 中 Data table 的好处在于它提供了使用模板来操作任何行。

所以我使用了这样的模板：

<template slot="col-Name" scope="cell">
            <span @click = "nameAction()">{{cell.data}}</span>
            <input type="text"
               v-model="cell.data" v-show="edit1" v-on:keyup.enter="edit1 = false;"> <br>
         </template>

所以我在这里考虑列（名称）中的一行，然后单击调用名为 nameAction 的函数的行。这是方法中的函数：

nameAction: function (row) {
  this.edit1 = true
}

在这里，我使输入字段在单击该行时可见。作为参考，您可以使用此 fiddle.

如何使用 Quasar 在数据 table editable onclick 特定行中创建单元格？

How to make cells in data table editable onclick specific row using Quasar?

quasar-framework