3-04-案例-Table案例

效果展示

创建项目

创建项目

npm init vite-app table

cd table

npm i

npm i less -D

npm i axios -S

设置全局样式

在index.css中：

:root {

font-size: 12px;

}

body {

padding: 5px;

}

引入Bootstrap.css

将Bootstrap.css复制到static/css文件夹下面

在main.js中：

1	`import './static/css/Bootstrap.css';`

封装axios

创建api/api.js:

import axios from 'axios';

axios.defaults.baseURL = 'https://www.escook.cn';

export const MyRequest;

在main.js中：

import { MyRequest } from './api/api.js';

const app = createApp(App);

app.config.globalProperties.$http = MyRequest;

app.mount('#app');

封装数据

在App.vue中：

<script>

export default {

data() {

return {

goodList: []

}

},

created() {

this.getGoodList();

},

methods: {

async getGoodList() {

const { data: res } = await this.$http.get('/api/goods');

if (res.status !== 0) return alert('商品列表获取失败！');

this.goodList = res.data;

}

}

}

</script>

创建组件MyTable.vue，注册到App.vue中，并传入数据：

<template>

<my-table :data="goodList"></my-table>

</template>

<script>

import MyTable from './components/MyTable.vue';

export default {

components: { MyTable }

}

</script>

实现header

<template>

<table>

<thead>

<tr>

<slot name="header"></slot>

</tr>

</thead>

<tbody></tbody>

</table>

</template>

在App.vue中渲染表头：

<template>

<my-table>

<template #header>

<th>序号</th>

<th>商品名称</th>

<th>价格</th>

<th>标签</th>

<th>操作</th>

</template>

</my-table>

</template>

实现body作用域插槽

实现body：

<template>

<table>

...

<tbody>

<tr v-for="item in data" :key="item.id">

<slot name="body" :item="item"></slot>

</tr>

</tbody>

</table>

</template>

<script>

export default {

props: {

data: {

type: Array,

required: true

}

}

}

</script>

在App.vue中渲染body

<template>

<my-table>

...

<template #body="{ item }">

<td>{{ item.id }}</td>

<td>{{ item.goods_name }}</td>

<td>¥{{ item.goods_price }}</td>

<td>

<input class="form-control form-control-sm form-ipt" type="text"
v-model.trim="item.inputValue" v-if="item.inputVisible" />

<button class="btn btn-primary btn-sm" v-else
@click="item.inputVisible = true">+Tag</button>

<div class="badge badge-warning tag" v-for="tag in item.tags"
:key="tag">{{ tag }}<div>

</td>

<td>

<button class="btn btn-danger btn-sm">删除</button>

</td>

</template>

</my-table>

</template>

<style>

.form-ipt {

width: 80px;

display: inline;

}

.tag {

margin: 0 4px;

}

</style>

增加删除功能

<template>

...

<button @click="onDelete(item.id)">...</button>

...

</template>

<script>

export default {

...

methods: {

onDelete(id) {

this.goodList = this.goodList.filter(x => x.id !== id);

}

}

}

</script>

## 实现显示组件获得焦点

<template>

...

<input ... v-focus />

...

</template>

<script>

export default {

directives: {

focus(el) {

el.focus();

}

}

}

</script>

借助自定义指令功能实现

实现失去焦点后的功能

<template>

...

<input ... @blur="onAddTag(item)">

...

</template>

<script>

export default {

methods: {

onAddTag(item) {

const val = item.inputValue;

item.inputValue = '';

item.inputVisible = false;

// 检查是否重复

if (!val || item.tags.indexOf(val) !== -1) return;

item.tags.push(val);

}

}

}

</script>