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>
?
?
|