用vue设计一个初始商品管理页面

在Vue.js中设计一个初始的商品管理页面，通常会包括以下几个步骤：

1. **设置结构**：

<template>
  <div class="goods-management">
    <header>
      <h2>商品管理</h2>
    </header>
    <section>
      <input v-model="searchKeyword" placeholder="搜索商品...">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in filteredGoods" :key="index">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>
              <button @click="editItem(index)">编辑</button>
              <button @click="deleteItem(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <footer>
      <button @click="addNewGood">添加新商品</button>
    </footer>
  </div>
</template>

这里我们创建了一个包含搜索框、表格展示商品信息以及操作按钮的基础布局。

2. **数据绑定和处理**：

<script>
export default {
  data() {
    return {
      goods: [], // 商品列表
      searchKeyword: '',
      editingIndex: null,
    };
  },
  computed: {
    filteredGoods() {
      return this.goods.filter(item => item.name.includes(this.searchKeyword));
    },
  },
  methods: {
    editItem(index) {
      this.editingIndex = index;
    },
    deleteItem(index) {
      this.$confirm('确认删除吗？', '提示', { type: 'warning' }).then(() => {
        this.goods.splice(index, 1);
      });
    },
    addNewGood() {
      // 添加新的商品操作
    },
  },
};
</script>

3. **状态管理** (如果需要 Vuex)：
引入Vuex并管理商品的状态。将`goods`数组存储在store中，并通过actions来进行增删改查操作。

4. **样式美化**：
使用CSS对页面进行样式定制，如颜色、字体等。