一.需要做出的效果图：

二.实现的步骤

首先，先建一个项目，命名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可以添加不同的标签，例如：

点击删除也可以删除该行，删除如上第一行，如下所示：

今天就分享到此，感谢预览~