BoostrapVue:修改表以将项显示为输入

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>