使用vue.js 完成部门管理： 查询数据 ，删除数据 功能 只写前端页面

好的，下面是一个使用Vue.js实现部门管理的示例，包括查询数据和删除数据功能的前端页面。

<template>
  <div>
    <h2>部门管理</h2>
    
    <div>
      <label>查询部门：</label>
      <input type="text" v-model.trim="searchKeyword" @keyup.enter="searchDepartments">
      <button @click="searchDepartments">查询</button>
    </div>
    
    <ul>
      <li v-for="department in departments" :key="department.id">
        {{ department.name }}
        <button @click="deleteDepartment(department.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      departments: [],
      searchKeyword: ''
    };
  },
  mounted() {
    this.fetchDepartments();
  },
  methods: {
    fetchDepartments() {
      axios.get('/api/departments')
        .then(response => {
          this.departments = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteDepartment(id) {
      axios.delete(`/api/departments/${id}`)
        .then(response => {
          this.fetchDepartments();
        })
        .catch(error => {
          console.log(error);
        });
    },
    searchDepartments() {
      axios.get(`/api/departments?q=${this.searchKeyword}`)
        .then(response => {
          this.departments = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

在这个示例中，我们使用了 Vue.js 的数据绑定功能，将搜索关键字绑定到了 searchKeyword 变量上，并将部门列表绑定到了 departments 变量上。在页面上，我们使用了 v-model 指令将输入框与 searchKeyword 变量进行双向绑定，并使用 v-for 指令将部门列表渲染到页面上。

我们还为查询按钮和输入框添加了事件监听，当用户输入回车或单击查询按钮时，会调用 searchDepartments 方法来搜索部门。该方法通过调用 API 来获取符合搜索关键字的部门列表，并更新 departments 变量。

我们还为每个部门添加了一个删除按钮，并在单击按钮时调用了 deleteDepartment 方法来删除部门。该方法通过调用 API 来删除部门，并更新部门列表。

请注意，该示例仅包含前端页面代码。您需要将其与后端 API 进行集成，以便完整的部门管理应用程序可以工作。