Vuejs，具有可编辑字段和双向数据绑定的动态 b 表

Question

我正在尝试生成具有可编辑字段和双向数据绑定的动态 b 表。

我不希望有任何硬编码值。现在，我有：

<b-table striped hover :items="filtered">
    <template v-slot:cell(issueDescription)="row">
      <b-form-input v-model="row.item.issueDescription" />
    </template>
    <template v-slot:cell(endTime)="row">
      <b-form-input v-model="row.item.endTime" />
    </template>
    <template v-slot:cell(startTime)="row">
      <b-form-input v-model="row.item.startTime" />
    </template>
</b-table>

地点：

filtered = [ { "issueDescription": "this is a description", "endTime": "2020-02-11T14:00:00.000Z", 
"startTime": "2020-02-11T01:24:00.000Z" }]

如果我使用 v-for 生成模板，那么我在每一列中都有可编辑的字段，但每个字段都没有绑定。

<b-table striped hover :items="filtered">
    <template v-for="x in filtered" v-slot:cell()="row">
      <b-form-input v-model="row.item.BIND_TO_SPECIFIC_TABLE_ROW_COL" />
    </template>
</b-table>

如何绑定到特定的行，col？？

我做了一个小提琴：https://jsfiddle.net/gfhu1owt/

Answer 1

如果您想让所有字段都可编辑，您可以使用此语法。

<template v-slot:cell()="{ item, field: { key } }">
  <b-form-input v-model="item[key]" />
</template>

它与你所拥有的非常相似。您只需要使用插槽上下文对象中的key。 （我已经简化了一点，但它与row.field.key 相同）。 另请注意，我没有在模板中使用v-for，这是因为v-slot:cell() 是一个后备插槽，它对所有插槽都有效，除非定义了特定插槽。例如，v-slot:cell(issueDescription) 将覆盖 v-slot:cell() 的 issueDescription 字段。

虽然上述方法有效，但问题可能会在您有一个您不想编辑的字段时出现，例如您的对象中可能有一个 id 字段。

为了解决这个问题，我定义了我的字段并将它们传递给表。我还在我想要编辑的字段中添加了editable 属性。 （请注意，这不是字段对象中的标准内容，而是特定于您的用例）。

然后我创建了一个计算属性editableFields，它返回所有具有editable: true 的字段，然后在v-for 内的b-table 中使用editableFields。

通过这种方式，您可以挑选要在对象中编辑的属性。

new Vue({
  el: "#app",
  computed: {
    editableFields() {
      return this.fields.filter(field => field.editable)
    }
  },
  data: {
    filtered: [
      { 
        "id": "1",
        "issueDescription": "this is a description", 
        "endTime": "2020-02-11T14:00:00.000Z", 
        "startTime": "2020-02-11T01:24:00.000Z" 
      },
      { 
        "id": "2",
        "issueDescription": "this is a description", 
        "endTime": "2020-02-11T14:00:00.000Z", 
        "startTime": "2020-02-11T01:24:00.000Z" 
      }
    ],
    fields: [
      { key: 'id', label: 'ID' },
      { key: 'issueDescription', label: 'Issue Description', editable: true },
      { key: 'startTime', label: 'Start Time', editable: true },
      { key: 'endTime', label: 'End Time', editable: true }
    ]
  }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <b-table :items="filtered" :fields="fields">
    <template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="{ item }">
      <b-input v-model="item[field.key]"/>
    </template>
  </b-table>
</div>