实现商品的删除和查询功能(20分) （1）增加一个“操作”列，点击“删除”按钮后，从表格中删除对应数据。（10分） （2）在表格上方添加一个输入框和一个查询按钮，实现根据商品名称的查询功能。（10分）

好的，我可以为您提供一个实现商品删除和查询功能的简单示例代码，希望能对您有所帮助：

<!-- HTML代码 -->
<div>
  <input type="text" v-model="searchText" placeholder="请输入商品名称">
  <button @click="search">查询</button>
</div>
<table>
  <thead>
    <tr>
      <th>商品名称</th>
      <th>价格</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in goodsList" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.stock }}</td>
      <td><button @click="deleteGoods(index)">删除</button></td>
    </tr>
  </tbody>
</table>

// JavaScript代码
new Vue({
  el: '#app',
  data: {
    goodsList: [ // 商品列表数据
      { name: '商品A', price: 20, stock: 100 },
      { name: '商品B', price: 30, stock: 200 },
      { name: '商品C', price: 40, stock: 300 },
      { name: '商品D', price: 50, stock: 400 }
    ],
    searchText: '' // 查询字符串
  },
  methods: {
    deleteGoods(index) { // 删除商品
      this.goodsList.splice(index, 1);
    },
    search() { // 查询商品
      const keyword = this.searchText.trim(); // 获取查询关键字
      if (keyword === '') { // 如果查询关键字为空，则显示全部商品
        return;
      }
      const result = this.goodsList.filter(goods => goods.name.includes(keyword)); // 使用includes方法过滤符合条件的商品
      this.goodsList = result; // 更新商品列表数据
    }
  }
});

以上代码中，我们使用了Vue.js来实现商品删除和查询功能。在表格中添加了一个操作列，其中包含一个“删除”按钮，点击按钮后可以删除对应的商品。在表格上方添加了一个输入框和一个查询按钮，输入关键字后点击查询按钮可以过滤出符合条件的商品，然后更新商品列表数据。

当然，这只是一个简单的示例代码，具体的实现还需要根据您的具体业务需求进行调整。希望能对您有所帮助。