在Vuejs和Bootstrap Vue中编辑行

import { BTable, BFormInput, BButton } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

<template>
  <div>
    <b-table :items="items" :fields="fields">
      <template #cell(actions)="row">
        <b-button @click="editRow(row.item)">编辑</b-button>
      </template>
    </b-table>

    <b-modal v-model="showModal" title="编辑行">
      <b-form>
        <b-form-group label="名称">
          <b-form-input v-model="editedItem.name"></b-form-input>
        </b-form-group>
        <b-form-group label="年龄">
          <b-form-input v-model="editedItem.age"></b-form-input>
        </b-form-group>
        <b-button @click="saveChanges">保存</b-button>
      </b-form>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John Doe', age: 25 },
        { id: 2, name: 'Jane Smith', age: 30 },
        { id: 3, name: 'Bob Johnson', age: 35 }
      ],
      fields: ['name', 'age', 'actions'],
      editedItem: {},
      showModal: false
    }
  },
  methods: {
    editRow(item) {
      this.editedItem = { ...item }
      this.showModal = true
    },
    saveChanges() {
      // 保存编辑后的数据
      // 更新数据源中对应的行数据
      this.showModal = false
    }
  }
}
</script>