使用vue.js 完成部门管理的 查询数据 和删除数据 功能

好的，我可以为您提供一些指南。

首先，您需要创建一个 Vue.js 应用程序，并将其设置为与您的后端 API 进行通信。您可以使用 axios 或其他类似的库来进行 API 调用。

接下来，您需要创建一个组件来展示您的部门列表。您可以使用 v-for 指令来遍历您从 API 获取的数据，并将其渲染到页面上。

示例：

<template>
  <div>
    <h2>部门列表</h2>
    <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: []
    };
  },
  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);
        });
    }
  }
};
</script>

在这个示例中，我们使用 axios 来获取部门列表，然后使用 v-for 指令将其渲染到页面上。我们还为每个部门添加了一个删除按钮，并在单击按钮时调用了 deleteDepartment 方法来删除部门。该方法通过调用 API 来删除部门，并更新部门列表。

这只是一个基本示例，您可以根据您的实际需求进行更改和调整。希望这可以帮助您开始实现您的部门管理应用程序。