Bootstrap Vue：修改 table 以将项目显示为输入

Question

如何修改下面的代码，使项目成为用户必须输入的输入？我希望能够有一个输入字段，而不是列出的项目。

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      // Note `isActive` is left out and will not appear in the rendered table
      fields: ['first_name', 'last_name', 'age'],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
}
</script>

Answer 1

您也可以使用 v-slot:cell():

new Vue({
  el: "#app",
  data() {
    return {
      fields: ['index', 'first_name', 'last_name', 'age'],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
})

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table striped hover :items="items" :fields="fields">
    <template v-slot:cell(index)="{ index }">
      {{ index + 1 }}
    </template>
    <template v-slot:cell()="{ item, field: { key }}">
      <b-form-input v-model="item[key]" />
    </template>
  </b-table>
</div>

Bootstrap Vue：修改 table 以将项目显示为输入

BoostrapVue: modify table to show items as inputs

javascript

vue.js

bootstrap-vue