table案例

前言

这篇文章介绍vue组件总结的一个table案例！
主要实现axios请求数据，然后渲染到页面，删除当前列表，以及Tag标签，按钮和输入框按需展示，按键修饰符等等。。。
看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！

实现步骤

① 搭建项目的基本结构

② 请求商品列表的数据

③ 封装 MyTable 组件

④ 实现删除功能

⑤ 实现添加标签的功能

1. 搭建项目基本结构

1.1 初始化项目

1. 在终端运行如下的命令，初始化 vite 项目：

npm init vite-app table-demo
1

2. cd 到项目根目录，安装依赖项：

npm install
1

3. 安装 less 依赖包：

npm i less -D
1

4. 使用 vscode 打开项目，并在 vscode 集成的终端下运行如下的命令，把项目运行起来：

npm run dev
1

5.安装 axios：

npm install axios@0.21.0 -S
1

1.2 梳理项目结构

2. 代码部分

main.js 代码：

import { createApp } from 'vue'
import App from './App.vue'

import axios from 'axios'

import './assets/css/bootstrap.css'
import './index.css'

// 配置axios请求根路径
axios.defaults.baseURL = 'https://www.escook.cn'

const app = createApp(App)

// 将axios挂载到全局
app.config.globalProperties.$http = axios


app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.css 代码：

:root {
 font-size: 12px; 
}
body {
 padding: 8px; 
}
1
2
3
4
5
6

MyTable 组件的封装要求 ：

1. 用户通过名为 data 的 prop 属性，为 MyTable.vue 组件指定数据源

2. 在 MyTable.vue 组件中，预留名称为 header 的具名插槽

3. 在 MyTable.vue 组件中，预留名称为 body 的作用域插槽

MyTable.vue 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

app.vue 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

3. 功能演示

实现删除功能，单机即可删除当前项

实现添加标签的功能

回车或者input输入框失去焦点都判断，vla不为空，或者不重复，就添加到标签。

input失去焦点，标签添加，展示+Tag按钮。

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！