一.需要做出的效果圖：

二.實現的步驟

首先，先建一個項目，命名Table，在Table項目中的components里新建一個MyTable.vue文件。

第二步，在原有的?HelloWorld.vue中寫入代碼。

HelloWorld.vue代碼如下：

<script setup>
import { ref } from 'vue'defineProps({msg: String,
})const count = ref(0)
</script><template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="count++">count is {{ count }}</button><p>Edit<code>components/HelloWorld.vue</code> to test HMR</p></div><p>Check out<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter</p><p>Install<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>in your IDE for a better DX</p><p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template><style scoped>
.read-the-docs {color: #888;
}
</style>

MyTable.vue代碼如下：

<template><table class="table table-striped table-bordered"><!-- 表格標題區域 --><thead><tr><slot name="header"></slot></tr></thead><!-- 表格主體區域 --><tbody><tr v-for="(item, index) in goodsList" :key="item.id"><slot name="body" :row="item" :index="index"></slot></tr></tbody></table>
</template><script setup>
const props = defineProps({goodsList: {type: Array,required: true,default: []}
})
</script>

在App.vue中寫入代碼：

<template><h4>商品管理</h4><MyTable :goodsList="goodsList"><template v-slot:header><th scope="col">#</th><th scope="col">商品名稱</th><th scope="col">價格</th><th scope="col">標簽</th><th scope="col">操作</th></template><template #body="{ row, index }"><td>{{ index + 1 }}</td><td>{{ row.goods_name }}</td><td>￥{{ row.goods_price }}</td><td><input type="text" v-if="row.inputVisible" class="form-control form-control-sm ipt-tag" v-focusv-model="row.inputValue" @keyup.esc="row.inputValue = ''"@blur="onInputConfig(row)"@keyup.enter="onInputConfig(row)"/><button class="btn btn-outline-primary rounded-pill" v-else @click="row.inputVisible = true">+Tag</button><span class="btn btn-outline-dark" v-for="item in row.tags" :key="item">{{ item }}</span></td><td><button type="button" class="btn btn-outline-danger btn-sm" @click="onRemove(row.id)">刪除</button></td></template></MyTable>
</template><script setup>
import MyTable from './components/MyTable.vue'import { ref } from 'vue'const goodsList = ref([{id: 1,goods_name: '夏季專柜同款女鞋',goods_price: 298,tags: ['舒適', '透氣'],inputVisible: false,inputValue: ''},{id: 2,goods_name: '冬季保暖女士休閑雪地靴 舒適加絨防水短靴 防滑棉鞋',goods_price: 89,tags: ['保暖', '防滑'],inputVisible: false,inputValue: ''},{id: 3,goods_name: '秋冬新款女士毛衣 套頭寬松針織衫 簡約上衣',goods_price: 199,tags: ['秋冬', '毛衣'],inputVisible: false,inputValue: ''},{id: 4,goods_name: '2023春秋裝新款大碼女裝 襯衫 上衣',goods_price: 19,tags: ['雪紡衫', '打底'],inputVisible: false,inputValue: ''},{id: 5,goods_name: '長款長袖圓領女士毛衣 2022秋裝新款假兩件連衣裙',goods_price: 178,tags: ['圓領', '連衣裙'],inputVisible: false,inputValue: ''}
])const onRemove = id => {goodsList.value = goodsList.value.filter(item => item.id != id)
}const vFocus = el => { el.focus() }const onInputConfig = row => {const val = row.inputValuerow.inputValue = ''row.inputVisible = falseif (!val || row.tags.indexOf(val) !== -1) {return}row.tags.push(val)
}
</script><style scoped>
th {text-align: center;
}
td {line-height: 30px;
}
.ipt-tag {width: 80px;display: inline;
}
input, span, button {margin-right: 10px;
}
</style>

最后，修改main.js的代碼：

import { createApp } from 'vue'
import './bootstrap.css'
import App from './App.vue'createApp(App).mount('#app')

三.運行結果

按ctrl+s保存，運行其結果：

點擊+Tag可以添加不同的標簽，例如：

點擊刪除也可以刪除該行，刪除如上第一行，如下所示：

今天就分享到此，感謝預覽~