javascript - 如何从自定义数据呈现的 bootstrap-vue 表中获取数据项数组

Question

我有一个使用从 json items 构造的 BootstrapVue 的数据表，代码如下:

<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 数组自定义呈现的。我的问题是 .. 如何从自定义呈现的表格中取回数组数据项？

上面代码的输出看起来像👇

从这个表中，我想要一个包含新的自定义呈现数据的 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'}
]

Answer 1

使用:

<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 react 性)