前面我們介紹完配置路由的網址及組件畫面，接下來針對組件畫面的內容，進行介紹，以 src/views/Employee.vue為例，這個組件畫面，主要提供幾個功能，參考如下。

1. 配置一個按鈕組，有新增、重新載入按鈕
2. 顯示一個可列出員工資料清單的表格
3. 配置一個分頁元件(pagination)，提供換頁查詢功能
4. 設置一個員工資料輸入互動視窗(Modal)，用於新增或修改員工資料

<!-- src/views/Employee.vue -->
<template>
  <section id="member-settings">
    <h1>成員設定</h1>

    <!-- 新增員工 / 重新載入 按鈕 -->
    <div class="button-field mb-2">
      <BButton variant="success" @click="openCreate">+ 新增員工</BButton>
      <BButton variant="primary" @click="refreshList">重新載入</BButton>
    </div>

    <!-- 員工資料清單表格 -->
    <EmployeeTable
      :employees="employees"
      @edit="openEdit"
      @delete="confirmDelete"
      :current-page="currentPage"
      :page-size="pageSize"
    />

    <!-- 分頁元件 -->
    <b-pagination
      v-model="currentPage"
      :per-page="pageSize"
      :total-rows="employeesCount"
      class="my-3"
    />

    <!-- 員工資料輸入互動視窗(Modal) -->
    <EmployeeModal
      :modelValue="showModal"
      @update:modelValue="showModal = $event"
      :is-edit="isEdit"
      :initial-employee="editingEmployee"
      @submit="handleSubmit"
    />
  </section>
</template>

在第一個功能中，即配置一個按鈕組，有新增、重新載入按鈕。

• 有使用到BootstrapVueNext所提供的按鈕元件<BButton>，可快速建立不同樣式的按鈕。

  • 通常在使用外部元件之前，需要先進行安裝，可於命令提示字元視窗中，在Vue專案根目錄/之下，輸入以下指令

    npm install bootstrap bootstrap-vue-next
    

  • 安裝完成後，再由main.js引入並完成註冊，參考如下

    // src/main.js
    import { createApp } from 'vue';
    import App from './App.vue';
    
    // 引入Bootstrap樣式
    import 'bootstrap/dist/css/bootstrap.css'; // Bootstrap5的CSS
    import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'; // BootstrapVueNext 的自訂樣式
    
    // 引入BootstrapVueNext套件
    import BootstrapVueNext from 'bootstrap-vue-next';
    
    const app = createApp(App);
    app.use(BootstrapVueNext); // 啟用BootstrapVueNext的所有元件
    app.mount('#app');
    

  • <BButton>中的variant參數，提供不同樣式供選擇，success代表綠色、primary代表藍色，各樣式代表意義的清單，皆可查詢官方資料，或直接問ChatGPT得到解答，以下清單供參考，並且尚有其他參數可控制按鈕樣式。

• 除了按鈕樣式外，按下按鈕之後，通常會搭配一個監聽事件的互動設計，在JavaScript的addEventListener('click', ...)功能，在Vue則提供較簡潔的寫法，即@click ，並以此來綁定對應的方法。

  • 其中@是v-on的縮寫，表示「監聽事件」，click則是事件名稱，代表「點擊」事件。原本寫法為v-on:click，縮寫後@click，可達到同樣功能。

  • 方法名稱則是在中的methods裡，所定義的函式，如openCreate()，用於新增員工，及refreshList()，用於重新載入畫面。

    // src/views/Employee.vue
    <script>
    export default {
    
    	methods: {
    		openCreate() {
    	    this.isEdit = false;
    	    this.editingEmployee = {
    	      name: "",
    	      age: null,
    	      phone: "",
    	      identity: "FULL",
    	      salary_type: "MONTH"
    	    };
    	    this.showModal = true;
    		},
        refreshList() {
          store.dispatch(`employee/${FETCH_EMPLOYEES}`, {
            page: this.currentPage,
            page_size: this.pageSize
          });
        }
      }
    
    };
    </script>
    

• 因此，點擊按鈕後，會根據所對應的方法來執行，執行過程中，涉及到資料流與狀態管理的問題，將在後續進行介紹。