如何实现切换tab的时候左边的区域只有数据发生变化不会跟着tab切换而切换

我用的是element-ui组件库

实现这样的效果

a里面的内容固定在页面上，上面的数据跟着tab切换而改变，b随着tab切换而切换
谢谢帮助！

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

usp1994 2023-06-02 16:38

关注

保存以下代码到html，直接执行即可


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签切换</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
    <style>
        #app{
            width: 1200px;
        }
        .box{
            display: flex;
        }
        .box-item-1{
            width: 100px;
        }
        .box-item{
            width: 50%;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-radio-group v-model="activeTag">
        <el-radio-button label="1">标签1</el-radio-button>
        <el-radio-button label="2">标签2</el-radio-button>
        <el-radio-button label="3">标签3</el-radio-button>
        <el-radio-button label="4">标签4</el-radio-button>
    </el-radio-group>
    <div class="box">
        <div class="box-item-1">
            <el-card class="box">区域A</el-card>
        </div>
        <div class="box-item">
            <el-card class="box" v-show="activeTag === '1'">内容1</el-card>
            <el-card class="box" v-show="activeTag === '2'">内容2</el-card>
            <el-card class="box" v-show="activeTag === '3'">内容3</el-card>
            <el-card class="box" v-show="activeTag === '4'">内容4</el-card>
        </div>
    </div>
</div>

<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        activeTag: '1'
      };
    }
  })
</script>
</body>
</html>