el-select与tabs结合使用

最新推荐文章于 2024-03-29 10:14:41 发布

原创最新推荐文章于 2024-03-29 10:14:41 发布 · 493 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

7 篇文章

订阅专栏

该代码示例展示了如何在Vue.js应用中创建一个自定义的el-select组件，包含选项切换功能。组件使用v-model绑定值，通过tabsChange方法处理选项切换，选项用v-for遍历生成，并有active状态的样式切换。

 <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;
  }
}