el-select与tabs结合使用

最新推荐文章于 2024-09-21 10:57:52 发布

小猫猫改bug

最新推荐文章于 2024-09-21 10:57:52 发布

阅读量331

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_65915285/article/details/129045147

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 <el-select v-model="value" placeholder="请选择">
    <div class="tabs-contain">
      <div v-for="(item,i) in tabs" :key="i" class="tabs" @click="tabsChange(i)" :class="{'active':isActive === i }">{{ item }}</div>
    </div>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
.tabs-contain{
  display: flex;
  justify-content: center;
  .tabs{
    cursor: pointer;
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: pink;
    margin-right: 10px;
    color: #fff;
  }
  .active{
    background-color: blue;
  }
}