vue export default简单实现书店管理表格

### 使用 Vue.js 实现简单的书店管理表格

为了实现一个简单的书店管理表格，可以遵循以下结构化的方式构建组件。此方法不仅展示了如何创建、读取、更新和删除书籍记录（CRUD操作），还说明了如何利用Vue.js的核心特性来简化开发过程。

#### 组件定义

下面是一个`BookManager.vue`组件的示例代码：

<template>
  <div class="book-manager">
    <!-- 表格头部 -->
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Author</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <!-- 动态渲染每一本书的信息 -->
        <tr v-for="(book, index) in books" :key="index">
          <td>{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>
            <button @click="editBook(index)">Edit</button>
            <button @click="deleteBook(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加/编辑书籍表单 -->
    <form @submit.prevent="addOrUpdateBook()">
      <input type="text" placeholder="Title" v-model="newBook.title"/>
      <input type="text" placeholder="Author" v-model="newBook.author"/>
      <button type="submit">{{ editing ? 'Update' : 'Add' }} Book</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "BookManager",
  data() {
    return {
      books: [
        { id: 1, title: "The Great Gatsby", author: "F. Scott Fitzgerald" },
        { id: 2, title: "To Kill a Mockingbird", author: "Harper Lee" }
      ],
      newBook: {},
      editing: false,
      currentIndex: null
    };
  },
  methods: {
    addOrUpdateBook() {
      if (this.editing === true) {
        this.updateBook();
      } else {
        this.addBook();
      }
    },
    addBook() {
      const lastId = this.books.length > 0 ? this.books[this.books.length - 1].id : 0;
      this.newBook.id = lastId + 1;
      this.books.push(this.newBook);
      this.clearForm();
    },
    editBook(index) {
      this.currentIndex = index;
      this.newBook = Object.assign({}, this.books[index]);
      this.editing = true;
    },
    updateBook() {
      this.$set(this.books, this.currentIndex, this.newBook);
      this.clearForm();
      this.editing = false;
    },
    deleteBook(index) {
      this.books.splice(index, 1);
    },
    clearForm() {
      this.newBook = {};
    }
  }
};
</script>

<style scoped>
.book-manager table {
  width: 100%;
}
</style>

上述代码片段实现了基本的增删改查功能，并通过事件处理函数与用户交互[^1]。此外，在HTML部分使用了标准的表格标记来呈现数据集；而在JavaScript逻辑里，则运用了Vue实例中的data选项存储状态以及methods属性定义行为[^4]。