quasar-framework - 如何使用 Quasar 使数据表中的单元格在单击特定行时可编辑？

Question

我在 Quasar 中使用数据表组件。我可以查看表格，这很棒。这里是

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

Answer 1

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

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

<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。