Vuejs, Dynami c b-таблица с редактируемыми полями и двусторонней привязкой данных - PullRequest
Новая
       37

Vuejs, Dynami c b-таблица с редактируемыми полями и двусторонней привязкой данных

0 голосов
/ 13 февраля 2020

Я пытаюсь сгенерировать динамическую c 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>

Как связать с указанной строкой c, col ??

Я сделал скрипку: https://jsfiddle.net/gfhu1owt/

1 Ответ

0 голосов
/ 13 февраля 2020

Если вы хотите, чтобы ВСЕ поля были редактируемыми, вы можете использовать этот синтаксис. 

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

Это очень похоже на то, что вы имели. Вам просто нужно было использовать key из объекта контекста слота. (Я немного сократил это, но это то же самое, что и row.field.key). Также обратите внимание, что я не использую v-for в шаблоне, это потому, что v-slot:cell() является резервным слотом, который действителен для всех слотов, если не определен определенный c. Например, v-slot:cell(issueDescription) перезапишет v-slot:cell() для поля issueDescription.

Хотя вышеприведенное работает, проблема может возникнуть однажды, когда у вас есть поле, которое вы НЕ хотите редактировать, как, возможно, * Поле 1013 * в вашем объекте.

Чтобы решить эту проблему, я определил свои поля и передал их в таблицу. Я также добавил свойство editable к полям, которые я хочу редактировать. (обратите внимание, что это не стандартная вещь в объекте поля, но что-то определенное c для вашего варианта использования).

Затем я создал вычисляемое свойство editableFields, которое возвращает все поля, имеющие editable: true , а затем используйте editableFields в моем v-for внутри b-table.

Таким образом, вы можете выбрать, какие свойства вы хотите редактировать в ваших объектах. 

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