tab组件，前一个tab项内容里点击按钮，跳转到下一个tab项

类似于这种，同学问的。主要是根据tab组件的activeKey属性来控制

activeKey绑定一个变量，变量与items里面的每一项的key值对应，activeKey的值为那个，他就跳转到对应tab项

主要代码如下：react版的

import React, { useState } from 'react'
import { Tabs, Button } from 'antd'

export default function Fff() {
  const [activeKey, setActiveKey] = useState('1')
  const toTwo = () => {
    setActiveKey(+activeKey + 1 + '')
  }
  const onChange = (key) => {
    setActiveKey(key)
  }
  const items = [
    {
      key: '1',
      label: `第一个`,
      children: (
        <>
          <Button onClick={toTwo}>跳转第二个</Button>
        </>
      ),
    },
    {
      key: '2',
      label: `第二个`,
      children: (
        <>
          <Button onClick={toTwo}>跳转第三个</Button>
        </>
      ),
    },
    {
      key: '3',
      label: `第三个`,
      children: `Content of Tab Pane 3`,
    },
  ]

  return (
    <div>
      <Tabs activeKey={activeKey} items={items} onChange={onChange} />
    </div>
  )
}

 vue版的

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="User" name="1">
        <el-button @click="toNext">点击跳转到第二个</el-button>
      </el-tab-pane>
      <el-tab-pane label="Config" name="2">
        <el-button @click="toNext">点击跳转到第三个</el-button>
      </el-tab-pane>
      <el-tab-pane label="Role" name="3">
        <el-button @click="toNext">点击跳转到第四个</el-button>
      </el-tab-pane>
      <el-tab-pane label="Task" name="4">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name)
  activeName.value = tab.props.name
}
const toNext = () => {
  activeName.value = +activeName.value + 1 + ''
}
</script>