用vue写一个供应商页面的增删改查，供应商页面字段涉及 名称、负责人、电话、地址、备注

好的，以下是一个简单的供应商页面的增删改查示例：

首先，我们需要安装 Vue 和 Vue Router，然后创建一个 Vue 实例和一个路由器。我们将使用 vue-router 来管理我们的路由。

npm install vue vue-router --save

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import SupplierList from './components/SupplierList.vue'
import SupplierAdd from './components/SupplierAdd.vue'
import SupplierEdit from './components/SupplierEdit.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: SupplierList },
  { path: '/add', component: SupplierAdd },
  { path: '/edit/:id', component: SupplierEdit }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

现在我们有了一个 Vue 实例和路由器，我们可以创建一些组件来渲染供应商页面的数据。

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">供应商列表</router-link>
      <router-link to="/add">添加供应商</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<!-- SupplierList.vue -->
<template>
  <div>
    <h1>供应商列表</h1>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>负责人</th>
          <th>电话</th>
          <th>地址</th>
          <th>备注</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="supplier in suppliers" :key="supplier.id">
          <td>{{ supplier.name }}</td>
          <td>{{ supplier.manager }}</td>
          <td>{{ supplier.tel }}</td>
          <td>{{ supplier.address }}</td>
          <td>{{ supplier.remark }}</td>
          <td>
            <router-link :to="'/edit/' + supplier.id">编辑</router-link>
            <button @click="deleteSupplier(supplier.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'SupplierList',
  data() {
    return {
      suppliers: []
    }
  },
  created() {
    this.fetchSuppliers()
  },
  methods: {
    fetchSuppliers() {
      // 发送请求获取供应商列表
      // 省略请求代码
      this.suppliers = [
        { id: 1, name: '供应商1', manager: '张三', tel: '123456789', address: '北京市海淀区', remark: '备注1' },
        { id: 2, name: '供应商2', manager: '李四', tel: '987654321', address: '上海市浦东新区', remark: '备注2' },
        { id: 3, name: '供应商3', manager: '王五', tel: '135792468', address: '广州市天河区', remark: '备注3' }
      ]
    },
    deleteSupplier(id) {
      // 发送请求删除供应商
      // 省略请求代码
      this.suppliers = this.suppliers.filter(supplier => supplier.id !== id)
    }
  }
}
</script>

<!-- SupplierAdd.vue -->
<template>
  <div>
    <h1>添加供应商</h1>
    <form @submit.prevent="addSupplier">
      <div>
        <label for="name">名称：</label>
        <input type="text" id="name" v-model="supplier.name" required>
      </div>
      <div>
        <label for="manager">负责人：</label>
        <input type="text" id="manager" v-model="supplier.manager" required>
      </div>
      <div>
        <label for="tel">电话：</label>
        <input type="text" id="tel" v-model="supplier.tel" required>
      </div>
      <div>
        <label for="address">地址：</label>
        <input type="text" id="address" v-model="supplier.address" required>
      </div>
      <div>
        <label for="remark">备注：</label>
        <input type="text" id="remark" v-model="supplier.remark">
      </div>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'SupplierAdd',
  data() {
    return {
      supplier: {
        name: '',
        manager: '',
        tel: '',
        address: '',
        remark: ''
      }
    }
  },
  methods: {
    addSupplier() {
      // 发送请求添加供应商
      // 省略请求代码
      this.$router.push('/')
    }
  }
}
</script>

<!-- SupplierEdit.vue -->
<template>
  <div>
    <h1>编辑供应商</h1>
    <form @submit.prevent="updateSupplier">
      <div>
        <label for="name">名称：</label>
        <input type="text" id="name" v-model="supplier.name" required>
      </div>
      <div>
        <label for="manager">负责人：</label>
        <input type="text" id="manager" v-model="supplier.manager" required>
      </div>
      <div>
        <label for="tel">电话：</label>
        <input type="text" id="tel" v-model="supplier.tel" required>
      </div>
      <div>
        <label for="address">地址：</label>
        <input type="text" id="address" v-model="supplier.address" required>
      </div>
      <div>
        <label for="remark">备注：</label>
        <input type="text" id="remark" v-model="supplier.remark">
      </div>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'SupplierEdit',
  data() {
    return {
      supplier: {}
    }
  },
  created() {
    this.fetchSupplier()
  },
  methods: {
    fetchSupplier() {
      // 发送请求获取供应商
      // 省略请求代码
      this.supplier = {
        id: 1,
        name: '供应商1',
        manager: '张三',
        tel: '123456789',
        address: '北京市海淀区',
        remark: '备注1'
      }
    },
    updateSupplier() {
      // 发送请求更新供应商
      // 省略请求代码
      this.$router.push('/')
    }
  }
}
</script>

这样，我们就完成了一个简单的供应商页面的增删改查功能。当用户访问根路径时，会显示供应商列表。点击“添加供应商”按钮时，会跳转到添加供应商页面。在添加供应商页面中填写完供应商信息并提交表单后，会将供应商信息添加到列表中。点击供应商列表中的“编辑”按钮时，会跳转到编辑供应商页面，可以修改供应商信息并保存。点击供应商列表中的“删除”按钮时，会将该供应商从列表中删除。