tab选项卡使用el-radio

最新推荐文章于 2025-06-05 23:27:12 发布

原创最新推荐文章于 2025-06-05 23:27:12 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

element 同时被 2 个专栏收录

8 篇文章

订阅专栏

css布局

1 篇文章

订阅专栏

本文介绍了一个基于Element UI的选项卡组件实现，展示了如何使用Vue.js创建多个功能选项卡，包括行程记录、订单详情等。每个选项卡对应不同的功能组件，如优惠券、亲密账户管理等，通过v-model绑定当前选中的选项卡标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="tab_container">
  <el-radio-group v-model="tab" size="small">
    <el-radio-button label="行程记录"/>
    <el-radio-button label="订单详情"/>
    <el-radio-button label="操作日志"/>
    <el-radio-button label="优惠券"/>
    <el-radio-button label="退款进度"/>
    <el-radio-button label="月卡用户查询"/>
    <el-radio-button label="用户登陆手机"/>
    <el-radio-button label="钱包余额"/>
    <el-radio-button label="亲密账户"/>
  </el-radio-group>
  <div class="tab_container_line"/>
  <coupon_comp v-if="tab==='优惠券'"/>
  <intimate_account_comp v-if="tab==='亲密账户'"/>
  <itenarty_record_comp v-if="tab==='行程记录'"/>
  <month_user_comp v-if="tab==='月卡用户查询'"/>
  <operation_log_comp v-if="tab==='操作日志'"/>
  <order_detail_comp v-if="tab==='订单详情'"/>
  <refunds_comp v-if="tab==='退款进度'"/>
  <user_login_phone_comp v-if="tab==='用户登陆手机'"/>
  <wallet_surplus_comp v-if="tab==='钱包余额'"/>
</div>

.tab_container {
  margin-top: 10px;
  background-color: white;

  &_line {
    border-bottom: 1px solid #DCDFE6;
    height: 1px;
    width: 98%;
    margin: 0 auto;
  }
}

/deep/ .el-radio-button, .el-radio-button__inner {
  margin-left: 20px;
}

/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #FFF;
  /*background-color: purple;*/
  /*border-color: purple;*/
  border-radius: 4px 4px 0px 0px;
  -webkit-box-shadow: -1px 0 0 0 #409EFF;
  box-shadow: 0px 0 0 0 #409EFF;
}

/deep/ .el-radio-button--small .el-radio-button__inner {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 0;
  /*border-left:1px solid gray;*/
  /*background: purple;*/
  border-left: 1px solid #DCDFE6;
  border-bottom: 0;
  border-radius: 4px 4px 0px 0px;
}