詳情：https://gitee.com/eduworkflow/opwf-front

子元件

<template>
  <div>
    <el-dialog
      title="新增圖書"
      :visible="visible"
    >
      <div><span>圖書名稱:</span>
        <el-input
          class='elinput'
          v-model="data.btitle"
        ></el-input>
 

      </div>
      <div><span>釋出日期:</span>
        <el-input
          class='elinput'
          v-model="data.bpub_date"
        >
        </el-input>
      </div>
      <div><span>閱讀量:</span>
        <el-input
          class='elinput'
          v-model
 
="data.bread"
        ></el-input>
      </div>
      <div><span>評論量:</span>
        <el-input
          class='elinput'
          v-model="data.bcomment"
        ></el-input>
      </div>

      <el-button @click="cancel">取 消</el-button>
      <
 
el-button
        type="primary"
        @click="addBook"
      >確 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
// import { addbook } from '@/http/apis'
export default {
  props: ['data', 'visible'],
  data() {
    return {
    }
  },
  methods: {
    addBook() {
      this.$emit('update:visible', false)  // 隱藏彈出框
      this.$emit('save')
    },
    cancel() {
      this.$emit('update:visible', false)
    }
  },
  mounted() {
  }
}
</script>

<style>
.elinput {
  width: 220px;
  height: 40px;
}
</style>

父元件

<template>
  <div>
    <h1>圖書管理系統 {{ dialogVisible }}</h1>
    <div style="margin: 30px;">
      <button @click="addNew">新增圖書</button>
      <BookEdit
        v-show='dialogVisible'
        :visible.sync='dialogVisible'
        :data='editData'
        @save='save'
      ></BookEdit>
    </div>

    <div>
      <table style='margin: auto; border: solid 1px black;'>
        <tr>
          <th>圖書編號</th>
          <th>圖書名字</th>
          <th>出版時間</th>
          <th>閱讀數</th>
          <th>評論數</th>
          <th>操作</th>
        </tr>
        <tr
          v-for="(book, index) in books"
          :key="book.id"
        >
          <td>{{book.id}}</td>
          <td>{{book.btitle}}</td>
          <td>{{book.bpub_date}}</td>
          <td>{{book.bread}}</td>
          <td>{{book.bcomment}}</td>
          <td>
            <button @click="edit(book)">修改</button>
            <button @click="del(book.id)">刪除</button>
          </td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import { getBookList, addBook, updateBook, delBook } from '@/http/apis'
import BookEdit from './components/BookEdit'

export default {
  components: {
    BookEdit,
  },
  data() {
    return {
      dialogVisible: false,
      books: [
        { id: 3, btitle: "...", bpub_date: "2020-08-11", bread: 100, bcomment: 50 }
      ],
      editData: {  // 編輯的內容
        btitle: "",
        bpub_date: "",
        bread: 0,
        bcomment: 0
      }
    }
  },
  methods: {
    // 1.點選新增圖書時初始化資料
    addNew() {
      this.editData = {  // 初始化 編輯內容
        btitle: "",
        bpub_date: "",
        bread: 100,
        bcomment: 0
      }
      this.dialogVisible = true  // 顯示彈框
    },

    // 2.獲取圖書列表
    get() {
      getBookList().then((data) => {
        // console.log(data)
        // books: [{btitle: "西遊記", bpub_date: "2020-08-11", bread: 100, bcomment: 50}]
        this.books = data.books
      })
    },

    // 3.修改或者新增圖書
    save() {
      // 根據editData中的id判斷是更新還是新增
      // debugger
      console.log(this.editData)
      if (this.editData.id) {
        // 如果有id, 修改圖書
        // 修改請求
        let params = this.editData
        updateBook(params).then((res)=>{
          console.log(res)
          this.get()
        })
      } else {
        // 增加圖書
        addBook(this.editData).then((res) => {
          this.get()
        })
      }
    },

    // 點選修改彈出修改頁面
    edit(book) {
      this.editData = book
      this.dialogVisible = true
    },

    // 刪除
    del(book_id) {
      let params = {
        id: book_id
      }
      delBook(params).then((res)=>{
        console.log(res)
        this.get()
      })
    }
  },
  created() {
    this.get()
  }
}
</script>

<style>
table tr td {
  width: 150px;
  border: solid 1px black;
}
</style>