Ant Design Vue-------Tabs标签页
今天就讲讲Ant Design Vue下的控件----tabs 标签页
结合项目中的需求，讲一下该控件如何使用，需求：
（1）竖排样式
（2）如何使用v-for绑定数据源
（3）change事件
（4）动态生成、动态切换（子组件和component、keepAlive、nextTick的联合使用）
官网案例来一个：
<template>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const activeKey = ref('1');
</script>效果如图：
项目中的代码：
<div style="height: calc(100vh - 230px)">
<a-tabs v-model:activeKey="activeItem" tab-position="left" @change="handleTabChange">
<a-tab-pane v-for="item in itemSource" :tab="item.dictionaryMenuName" :disabled="item.isHas == 1 ? false : true" :key="item.dictionaryName.split('|')[0]" />
</a-tabs>
</div>注：div的样式控制垂直滚动条；
1.tab-position=left控制竖排样式。这里顺便把常用的属性设置也列出来：
（1）v-model:activeKey 绑定的是用户当前选择的tab的key值；
（2）tab-position:共4个位置；top默认顶端；left:左侧竖排展示；right:右侧竖排展示；bottom：底部，如图：
（3）size:共三种大小；small:小，large:大，middle:默认值，如下图：
（4）type：页签的基本样式，三个类型。line、card、editable-card
（6）class样式：
:deep(.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab) {
width: 265px;
padding: 2px 20px;
margin: 2px 0 0;
}
2.绑定数据源
Tabs.TabPane控件a-tab-pane元素和for搭配使用：
itemSource:数据源（数组）
item：对象
tab:选项卡的标题；key:唯一标识，对应activeKey；
disabled：根据flag指定该标签是否可用。
3. script setup lang="ts" 和 tabs的change事件
import { onMounted, ref, reactive, toRaw, toRef, computed } from 'vue';
const activeItem = ref('');
const itemSource = ref([]);
function queryTabsList() {
let queryJson = {};//往后端传值
Query(queryJson).then((res) => {//Query:API
itemSource.value = res;
activeItem.value = null;//默认选项卡都未选中
}
//tabs选择事件
async function handleTabChange(key) {
console.log('key',key);
//var arr = key.split('|');
//if (arr.length > 0) {
// let selItem = arr[0]; //英文名称
// let dtoName = arr[1];//中文名称
// ……
//}
}4. 下面讲讲更复杂的应用，这种场景，一般用于tabs菜单动态切换功能。
（1）模板
<template>
<div class="bottom-main">
<a-tabs v-model:activeKey="activeKey" tabPosition="top" @change="tabItemSelected" size="small" type="card" style="height: 40px">
<a-tab-pane v-for="item in menuTabs" :key="`${item?.value}`" :tab="item?.label" />
</a-tabs>
<KeepAlive v-if="isAlive">
<component :is="currentPage" :param-condition="whereCond" />
</KeepAlive></div
></template>（2）脚本
const activeKey = ref('');
const menuTabs = ref([]);
function initTab() {
let query = {
name: 'getClass',
queryParams: {},
};
Query(cbxQuery).then((res) => {//Query:API
menuTabs.value = res;
});
}
//控制是否强制刷新
const isAlive = ref(true);
const currentPage = ref();//当前组件
const whereCond = reactive({//当前页面传值给子组件的参数
proId: '', //项目名称
});
//模拟的一组子组件
const typeCompentMap = {
base: input1,//引入input1组件
invest: input2,//引入input2组件
product: input3,//引入input3组件
price: input4,//引入input4组件
};
//tab切换事件
function tabItemSelected() {
currentPage.value = typeCompentMap[activeKey.value];
}
//挂载事件
onMounted(() => {
initTab();
});
//查询事件时刷新tab子组件
function handleSearch() {
activeKey.value = 'base';
whereCond.proId = selectedProjectId.value;
if (whereCond.proId) {
refreshChild();
}
}
function refreshChild() {
isAlive.value = false;
currentPage.value = typeCompentMap[activeKey.value];
nextTick(() => {//利用nextTick更新机制，强制刷新页面
isAlive.value = true;
});
}vue 中我们改变数据时不会立即触发视图，如果需要实时获取到最新的DOM，这个时候可以手动调用 nextTick
