antd vue Tabs控件的使用

Ant Design Vue-------Tabs标签页

今天就讲讲Ant Design Vue下的控件----tabs 标签页

结合项目中的需求,讲一下该控件如何使用,需求:

(1)竖排样式

(2)如何使用v-for绑定数据源

(3)change事件

(4)动态生成、动态切换(子组件和component、keepAlive、nextTick的联合使用)

官网案例来一个:

html 复制代码
<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>

效果如图:

项目中的代码:

html 复制代码
<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>
  1. div的样式控制垂直滚动条;

2.属性设置:

(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

(5)Tabs.TabPane控件a-tab-pane元素和for搭配使用,itemSource:数据源(数组),item:对象。 tab:选项卡的标题;key:唯一标识,对应activeKey;disabled:根据flag指定该标签是否可用。

(6)样式:

:deep(.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab) {

width: 265px;

padding: 2px 20px;

margin: 2px 0 0;

}

  1. script setup lang="ts" 和 tabs的change事件
javascript 复制代码
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];//中文名称
    //  ......
    //}
}
  1. 下面讲讲更复杂的应用,这种场景,一般用于tabs菜单动态切换功能。

(1)模板

html 复制代码
<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)脚本

html 复制代码
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

相关推荐
吃饺子不吃馅3 小时前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒4 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip11 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫12 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel13 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼14 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手17 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法17 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku17 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode18 小时前
iOS 苹果内购 Storekit 2
前端