哼啊啊啊啊啊啊啊啊啊

const app = createApp(App)
app.config.globalProperties.$http = axios
axios.defaults.baseURL = 'https://www.escook.cn'
app.use(store).use(router).mount('#app')

 <template>
  <table class="table table-bordered table-striped">
    <!-- 表格的标题区域 -->
    <thead>
      <tr>
        <slot name="header"></slot>
      </tr>
    </thead>
    <!-- 表格的主体区域 -->
    <tbody>
      <tr v-for="(item, index) of data" :key="item.id">
        <slot name="body" :item="item" :index="index"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'mytable',
  props: {
    data: {
      type: Array,
      required: true,
      default: []
    }
  }
}
</script>

<style></style>

<template>
  <div id="app">
    <my-table :data="goodslist">
      <template v-slot:header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th> 
      </template>
      <template v-slot:body="{ item, index }">
        <td>{{ index + 1 }}</td>
        <td>{{ item.goods_name }}</td>
        <td>￥{{ item.goods_price }}</td>
        <td>
          <input
            type="text"
            class="form-control form-control-sm ipt-tag"
            v-if="item.inputVisible"
            v-focus
            v-model.trim="item.inputValue"
            @blur="onInputConfirm(item)"
            @keyup.enter="onInputConfirm(item)"
            @keyup.esc="item.inputValue = ''"
          />
          <button
            type="button"
            class="btn btn-primary btn-sm"
            v-else
            @click="item.inputVisible = true"
          >
            +Tag
          </button>
          <span
            class="badge badge-warning ml-2"
            v-for="item of item.tags"
            :key="item"
            >{{ item }}
          </span>
        </td>
        <td>
          <button
            type="button"
            class="btn btn-danger"
            @click="onRemove(item.id)"
          >
            删除
          </button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from '@/components/mytable/MyTable.vue'
export default {
  name: 'app',
  components: {
    MyTable
  },
  directives: {
    focus(el) {
      el.focus()
    }
  },
  setup() {},
  data() {
    return {
      goodslist: []
    }
  },
  methods: {
    async getGoodsList() {
      const { data: res } = await this.$http.get('/api/goods')
      if (res.status !== 0) return console.log('失败')
      this.goodslist = res.data
      console.log(res.data)
    },
    onRemove(id) {
      this.goodslist = this.goodslist.filter((x) => x.id !== id)
    },
    onInputConfirm(item) {
      const val = item.inputValue
      item.inputValue = ''
      item.inputVisible = false
      if (!val || item.tags.indexOf(val) !== -1) return
      item.tags.push(val)
    }
  },
  created() {
    this.getGoodsList()
  }
}
</script>

<style lang="less"></style>