前言
如题，在使用Tabs标签页的时候，切换标签页的方法没有生效，记录一下。
正文
官方文档示例的代码如下：
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
| <template>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="User" name="first">User</el-tab-pane>
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
</style>
|
附上页面的效果图：
这个页面上面是一个标签页，下面是对应的表格，底部是一个分页，注意，分页要写在对应的el-tabs的外面，否则会导致分页底部被遮住一部分。模板部分代码如下：
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
| <template>
<div class="app-container home">
<el-row :gutter="20">
<el-col :span="24" :xs="24">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="库存预警" name="first">
<el-table
v-loading="loading"
:data="inventoryWarnList"
empty-text="暂无数据"
highlight-current-row
>
<el-table-column
label="序号"
align="center"
type="index"
width="50px"
/>
<el-table-column
key="wareHouseNo"
label="仓库编号"
align="center"
prop="wareHouseNo"
/>
<el-table-column
key="wareHouseName"
label="仓库名称"
align="center"
prop="wareHouseName"
:show-overflow-tooltip="true"
/>
<el-table-column
key="materialNo"
label="物料编号"
align="center"
prop="materialNo"
:show-overflow-tooltip="true"
/>
<el-table-column
key="materialName"
label="物料名称"
align="center"
prop="materialName"
:show-overflow-tooltip="true"
/>
<el-table-column
key="currentNum"
label="当前库存"
align="center"
prop="currentNum"
:show-overflow-tooltip="true"
/>
<el-table-column
key="inventoryWarningValue"
label="预警库存"
align="center"
prop="inventoryWarningValue"
:show-overflow-tooltip="true"
/>
</el-table>
</el-tab-pane>
<el-tab-pane label="检验预警" name="second">
<el-table
v-loading="loading"
:data="inspectionWarnList"
empty-text="暂无数据"
highlight-current-row
>
<el-table-column
label="序号"
align="center"
type="index"
width="50px"
/>
<el-table-column
key="wareHouseNo"
label="仓库编号"
align="center"
prop="wareHouseNo"
:show-overflow-tooltip="true"
/>
<el-table-column
key="wareHouseName"
label="仓库名称"
align="center"
prop="wareHouseName"
:show-overflow-tooltip="true"
/>
<el-table-column
key="materialNo"
label="物料编号"
align="center"
prop="materialNo"
:show-overflow-tooltip="true"
/>
<el-table-column
key="lastInspectionTime"
label="上次预警时间"
align="center"
prop="lastInspectionTime"
><template #default="scope">{{
formatDate(scope.row.lastInspectionTime)
}}</template>
</el-table-column>
<el-table-column
key="rfidCode"
label="标签编码"
align="center"
prop="rfidCode"
:show-overflow-tooltip="true"
/>
</el-table>
</el-tab-pane>
</el-tabs>
<pagination
v-show="total > 0"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="loadCurrentPageData"
/>
</el-col>
</el-row>
</div>
</template>
|
一开始，我自己写的handleClick如下：
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
| const handleClick = async (tab, event) => {
loading.value = true;
try {
switch (tab.name) {
case 'first':
currentLoadDataMethod.value = getInventoryWarnListData;
break;
case 'second':
currentLoadDataMethod.value = getInspectionWarnListData;
break;
case 'third':
currentLoadDataMethod.value = getReturnWarnListData;
break;
case 'fourth':
currentLoadDataMethod.value = getScrapWarnListData;
break;
}
await currentLoadDataMethod.value();
} finally {
loading.value = false;
}
};
|
然后发现切换标签页没有效果，根本没有进入这个switch，于是加了一个调试代码：
1
| console.log("Tab clicked", tab, event);
|
把这一行写在方法内部，打印内容如下：
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
| {
"uid": 1145,
"slots": {},
"props": {
"name": "second",
"label": "库存预警",
"closable": false,
"disabled": false,
"lazy": false
},
"paneName": "second",
"active": true,
"index": "1",
"isClosable": false
}
|
问题找到了，tab.name是undefined，但tab.props.name是正确的。修改代码如下：
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
| const handleClick = async (tab, event) => {
loading.value = true;
try {
switch (tab.props.name) {
case 'first':
currentLoadDataMethod.value = getInventoryWarnListData;
break;
case 'second':
currentLoadDataMethod.value = getInspectionWarnListData;
break;
}
await currentLoadDataMethod.value();
} finally {
loading.value = false;
}
};
|
同时，还有一个问题，本来我是把分页写在每一个标签页内部的，但会导致分页底部的一部分被遮住，无法显示完全，所以需要动态的根据当前标签页调用对应的接口来进行分页。
首先定义一下：const currentLoadDataMethod = ref(null);，然后在pagination里绑定loadCurrentPageData，并且写好对应的方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| const loadCurrentPageData = async () => {
if (currentLoadDataMethod.value) {
loading.value = true;
try {
await currentLoadDataMethod.value();
} finally {
loading.value = false;
}
}
};
|
对应的方法如下：
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
| async function getInspectionWarnListData() {
loading.value = true;
try {
const response = await getInspectionWarnList(queryParams.value);
inspectionWarnList.value = response.rows;
total.value = response.total;
} catch (error) {
console.error('Failed to fetch inspection warn list:', error);
} finally {
loading.value = false;
}
}
async function getInventoryWarnListData() {
loading.value = true;
try {
const response = await getInventoryWarnList(queryParams.value);
inventoryWarnList.value = response.rows;
total.value = response.total;
} catch (error) {
console.error('Failed to fetch inventory warn list:', error);
} finally {
loading.value = false;
}
}
|
结语
很多人问组件的其他内容，这里补充一下，分页记得声明以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| import { getCurrentInstance, ref, reactive, toRefs } from 'vue';
const total = ref(0);
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
},
});
const { queryParams } = toRefs(data);
|
这样分页就不会出问题。