vue elementui图书管理

### 使用 Vue 和 ElementUI 实现图书管理系统的示例

#### 创建项目结构
为了构建一个基于 Vue 和 ElementUI 的图书管理系统，首先需要初始化一个新的 Vue 项目并安装必要的依赖项。

npm init vue@latest
cd project-name
npm install element-plus axios

确保引入 `element-ui` 样式文件以及注册全局组件[^2]：

// main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css' // 引入样式
import ElementUI from 'element-ui'

const app = createApp(App)
app.use(ElementUI)
app.mount('#app')

#### 设计页面布局
在 `src/components/BookManagement.vue` 文件中定义书籍列表展示区域。这里采用响应式的表格来显示数据，并提供增删改查功能按钮。

<template>
  <div class="book-management">
    <!-- 表格 -->
    <el-table :data="books" style="width: 100%">
      <el-table-column prop="title" label="书名"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column fixed="right" width="180px">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
          <el-button @click="handleDelete(scope.$index, scope.row)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加新书表单 -->
    <el-dialog title="新增书籍" v-model="dialogVisible" width="30%" center>
      <el-form ref="formRef" :model="newBookForm" status-icon>
        <el-form-item label="书名：" prop="title">
          <el-input v-model="newBookForm.title"></el-input>
        </el-form-item>
        <el-form-item label="作者：" prop="author">
          <el-input v-model="newBookForm.author"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('formRef')">确 定</el-button>
      </span>
    </el-dialog>
    
    <el-button type="success" plain @click="addNewBook()">添加新书</el-button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";

let state = reactive({
  books: [
    {
      id: 1,
      title: "Vue实战",
      author: "张三"
    },
    ...
  ],
  dialogVisible: false,
  newBookForm: {}
});

function addNewBook() {
  state.dialogVisible = true;
}

function handleEdit(row) {}

function handleDelete(index, row) {}

function submitForm(formName) {}

</script>

<style scoped>
.book-management .el-button--success.is-plain {
  margin-top: 20px;
}
</style>

此代码片段展示了如何利用 Element UI 提供的各种组件快速搭建起具有基本 CRUD 功能的界面框架[^3]。