具體代碼：

0. main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 封裝全局指令 focus
// inserted是生命周期鉤子函數(shù)，本身就是異步執(zhí)行的
Vue.directive('focus', {
  // 指令所在的dom元素，被插入到頁面中時(shí)觸發(fā)
  inserted(el) {
    el.focus()
  }
})

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

1. App.vue

<template>
  <div class="table-case">
    <MyTable :data="goods">
      <template #head>
        <th>編號</th>
        <th>圖片</th>
        <th>名稱</th>
        <th width="100px">標(biāo)簽</th>
      </template>
      <template #body="{ item, index}">
        <td>{{ index + 1 }}</td>
        <td><img :src="item.picture" /></td>
        <td>{{ item.name }}</td>
        <td>
          <!-- 標(biāo)簽組件 -->
          <MyTag v-model="item.tag"></MyTag>
        </td>
      </template>
    </MyTable>
  </div>
</template>

<script>
// my-tag 標(biāo)簽組件的封裝
// 1. 創(chuàng)建組件 - 初始化
// 2. 實(shí)現(xiàn)功能
//    (1) 雙擊顯示，并且自動(dòng)聚焦
//        v-if v-else @dblclick 操作 isEdit
//        自動(dòng)聚焦：
//        1. $nextTick => $refs 獲取到dom，進(jìn)行focus獲取焦點(diǎn)
//        2. 封裝v-focus指令
//    (2) 失去焦點(diǎn)，隱藏輸入框
//        @blur 操作 isEdit 即可

//    (3) 回顯標(biāo)簽信息
//        回顯的標(biāo)簽信息是父組件傳遞過來的
//        v-model實(shí)現(xiàn)功能（簡化代碼） v-model => :value 和 @input
//        組件內(nèi)部通過props接收，:value設(shè)置給輸入框
//    (4) 內(nèi)容修改了，回車 => 修改標(biāo)簽信息
//        @keyup.enter，觸發(fā)事件 $emit('input', e.target.value)

//  ------------------------------------------------------------------------

// my-table表格組件的封裝
// 1. 數(shù)據(jù)不能寫死，動(dòng)態(tài)傳遞表格渲染的數(shù)據(jù) props
// 2. 結(jié)構(gòu)不能寫死 - 多處結(jié)構(gòu)自定義 【具名插槽】
//    (1) 表頭支持自定義
//    (2) 主體支持自定義

import MyTag from './components/MyTag.vue';
import MyTable from './components/MyTable.vue';
export default {
  name: 'TableCase',
  components:{
    MyTag,
    MyTable
  },
  data () {
    return {
      // 測試組件功能的臨時(shí)數(shù)據(jù)
      tempText: '1水杯',
      tempText2: '2花瓶',
      goods: [
        { id: 101, picture: 'https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg', name: '梨皮朱泥三絕清代小品壺經(jīng)典款紫砂壺', tag: '茶具' },
        { id: 102, picture: 'https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg', name: '全防水HABU旋鈕牛皮戶外徒步鞋山寧泰抗菌', tag: '男鞋' },
        { id: 103, picture: 'https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png', name: '毛茸茸小熊出沒，兒童羊羔絨背心73-90cm', tag: '兒童服飾' },
        { id: 104, picture: 'https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg', name: '基礎(chǔ)百搭，兒童套頭針織毛衣1-9歲', tag: '兒童服飾' },
      ]
    }
  },
}
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
}
</style>

2. MyTable.vue

<template>
    <table class="my-table">
      <thead>
        <tr>
          <slot name="head"></slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="item.id">
          <slot name="body" :item="item" :index="index"></slot>
        </tr>
      </tbody>
    </table>
</template>

<script>
export default {
  props:{
    data:{
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="less" scoped>
.my-table {
  width: 100%;
  border-spacing: 0;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
  th {
    background: #f5f5f5;
    border-bottom: 2px solid #069;
  }
  td {
    border-bottom: 1px dashed #ccc;
  }
  td,
  th {
    text-align: center;
    padding: 10px;
    transition: all .5s;
    &.red {
      color: red;
    }
  }
  .none {
    height: 100px;
    line-height: 100px;
    color: #999;
  }
}
</style>

3. MyTag.vue

<template>
  <div class="my-tag">
    <input
      v-if="isEdit"
      v-focus
      ref="inp"
      class="input"
      type="text"
      placeholder="輸入標(biāo)簽"
      :value="value"
      @blur="isEdit = false"
      @keyup.enter="handleEnter"
    />
    <div
     v-else
     @dblclick="handleClick"
     class="text">
     {{ value }}</div>
  </div>
</template>

<script>
/* 自動(dòng)聚焦：等dom更新完了，再聚焦
 * 
 * 聚焦方法1：dom異步更新
 *   用this.$nextTick(函數(shù)體)，等dom更新后，再觸發(fā)執(zhí)行此方法里的函數(shù)體
 * 聚焦方法2：自定義指令
 *   封裝到指令里，就不用寫等待更新了，因?yàn)閕nserted是生命周期鉤子函數(shù)，本身就是異步執(zhí)行的
 *   具體的代碼為input標(biāo)簽里的v-focus
 */
export default {
  props:{
    value: String
  },
  data(){
    return {
      isEdit : false
    }
  },
  methods:{
    handleClick(){
      // 雙擊后，切換到顯示狀態(tài)（Vue是dom異步更新）
      this.isEdit = true
      
      // this.$nextTick(() => {
      //   this.$refs.inp.focus()
      // })     
    },
    handleEnter(e){
      // 非空處理
      if(e.target.value.trim() === '') return alert('標(biāo)簽內(nèi)容不能為空')

      // 子傳父，將回車時(shí)，[輸入框的內(nèi)容]提交給父組件更新
      // 由于父組件是v-model，觸發(fā)事件，需要觸發(fā)input事件
      this.$emit('input', e.target.value)
      // 提交完成，關(guān)閉輸入狀態(tài)
      this.isEdit = false
    }
  }

}
</script>

<style lang="less" scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>