vue中框架下elmentui的（el

框架下elmentui的（el"/>

vue中框架下elmentui的（el

 根据原型体，选一个最接近的UI组件 el-tabs

 html：

思路：通过el-tabs默认选中页签（v-model的值）与（切换列表循环的下标）进行判断，为true 表示当前选中项，就添加选中的图片，为false 添加默认的图片

 <template><div><div class="know_content"><el-tabs :tab-position="tabPosition" v-model="activeId"><el-tab-pane label="用户管理" v-for="(s,sIndex) in subjectList" :key="sIndex" :name="sIndex+''"><!-- 左边 “标题” 切换 --><template slot="label"><div class="know_item"><img :src="activeId==sIndex?s.active:s.img" alt=""><div>{{s.title}}</div></div></template><!-- 右边pane内容 --><div class="know_right"></div></el-tab-pane></el-tabs></div></div>
</template>

js：

<script>
export default {data () {return {tabPosition: 'left',activeId: '0', // 默认显示第一页subjectList: [{title: '数学', active: require('@/assets/home/math1.png'), img: require('@/assets/home/math.png')},{title: '物理', active: require('@/assets/home/physics1.png'), img: require('@/assets/home/physics.png')},{title: '英语', active: require('@/assets/home/english1.png'), img: require('@/assets/home/english.png')}]}}
}
</script>

 css：

<style lang="scss" scoped>// 内容/deep/ .know_content{padding:22px 20px 18px 20px;margin:0px 80px;height: calc(100vh - 13vw);background: url('../../assets/home/know_bgs.png') no-repeat;background-size: 100% 100%;display: flex;justify-content: space-between;.el-tabs__header.is-left{margin-right: 0;}.el-tabs__nav-wrap::after {display: none;}.el-tabs__active-bar {display: none;}.el-tabs__nav-scroll::-webkit-scrollbar {height: 0;}.el-tabs__nav-scroll {overflow-x: scroll;background: linear-gradient(50deg, transparent 38px, rgba(25, 177, 201,.2) 0);padding-right: 40px;width: 220px;height: 100%;}.el-tabs__item {font-size: 24px;color: #D6D6D6;padding: 22px 0;border-radius: 0px 64px 65px 0px;height: auto;text-align: center;width: 180px;margin: 60px 0;}.el-tabs__item.is-active {color: #fff;background: #03ba82;}.el-tabs__content {z-index: 10;text-align: left;color: #fff;}.know_item{img{height: 48px;}}.know_right{width:1435px;}}
}
</style>

       希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~