Как получить массив элементов данных из пользовательских данных, представленных в таблице начальной загрузки - PullRequest
Новая
       17

Как получить массив элементов данных из пользовательских данных, представленных в таблице начальной загрузки

2 голосов
/ 09 октября 2019

У меня есть таблица данных с использованием BootstrapVue, созданная из json items, и код выглядит следующим образом: 

<template>
  <div>
    <b-table small :fields="fields" :items="items" responsive="sm">
      <!-- A virtual column -->
      <template v-slot:cell(index)="data">
        {{ data.index + 1 }}
      </template>

      <!-- A custom formatted column -->
      <template v-slot:cell(name)="data">
        <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
      </template>

      <!-- A virtual composite column -->
      <template v-slot:cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

      <!-- Optional default data cell scoped slot -->
      <template v-slot:cell()="data">
        <b-form-input v-model="data.value" placeholder="Enter custom value" />
      </template>
    </b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        outputItems: [],
        fields: [
          // A virtual column that doesn't exist in items
          'index',
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          // A regular column
          'age',
          // A regular column
          'sex',
          // A virtual column made up from two fields
          { key: 'nameage', label: 'First name and age' }
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]
      }
    }
  }
</script>

Таблица здесь настраивается из массива items. У меня вопрос .. Как вернуть элементы массива данных из таблицы, обработанной пользователем?

Вывод приведенного выше кода выглядит как ?

enter image description here

Из этой таблицы я хочу получить массив json с новыми пользовательскими данными. Поэтому мой вывод outputItems для приведенной выше таблицы должен выглядеть следующим образом: ? 

outputItems = [
  {'Index': 1, 'Full Name': 'DOE,John', 'Age': 42, 'Sex': 'Male', 'First name and age': 'John is 42 years old'},
  {'Index': 2, 'Full Name': 'DOE,Jane', 'Age': 36, 'Sex': 'Female', 'First name and age': 'Jane is 36 years old'},
  {'Index': 3, 'Full Name': 'KINCADE,Rubin', 'Age': 73, 'Sex': 'Male', 'First name and age': 'Rubin is 73 years old'},
  {'Index': 4, 'Full Name': 'PATRIDGE,Shirley', 'Age': 62, 'Sex': '', 'First name and age': 'Shirley is 62 years old'}
]

1 Ответ

1 голос
/ 09 октября 2019

Использование: 

<template>
  <div>
    <b-table small :fields="fields" :items="items" responsive="sm">
      <!-- A virtual column -->
      <template v-slot:cell(index)="data">
        {{ data.index + 1 }}
      </template>

      <!-- A custom formatted column -->
      <template v-slot:cell(name)="data">
        <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
      </template>

      <!-- A virtual composite column -->
      <template v-slot:cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

      <template v-slot:cell(age)="data">
        <b-form-input v-model="data.item.age" placeholder="Enter age" />
      </template>
    </b-table>
  </div>
</template>

Примечание: Каждый раз, когда пользователь вводит символ во входные данные, таблица будет перерисовываться. Это происходит из-за базовой модели данных для обновляемых элементов (Vue реактивность)

...