当前位置: 首页 > article >正文

vue2 el-tabs 实现当内容超出时可以左右切换滚动的tab标签

目标:基于 el-tabs 实现当内容超出时可以左右切换滚动的tab标签

最开始的做法是直接用el-button去做,但是发现当内容超出后会它会自动换行并且还不可以左右切换

就像下面的效果,这种做出来就不是很美观

<el-radio-group v-model="tabPosition">
  <el-radio-button
    v-for="item in productTabTypeList"
    :key="item.id"
    :value="item.value"
  >
    {
  {item.label}}
  </el-radio-button>
</el-radio-group>
        
const productTabType = [
  {
    label: "科技信用贷",
    value: "科技信用贷",
    id: 1,
  },
  {
    label: "科技项目贷",
    value: "科技项目贷",
    id: 2,
  },
  {
    label: "科技担保贷",
    value: "科技担保贷",
    id: 3,
  },
  {
    label: "科技人才贷",
 

http://www.kler.cn/a/299601.html

相关文章:

  • Maven的单元测试
  • 创建 priority_queue - 进阶(内置类型)c++
  • postgresql的用户、数据库和表
  • 人工智能在计算机视觉中的应用与创新发展研究
  • doris:异常数据处理
  • 16.Word:石油化工设备技术❗【28】
  • Hive和Hbase的区别
  • 共享旅游卡,客户旅游云南,真实反馈,全程无删减!
  • Dubbo配置及介绍
  • 通过命令行模式重启GDM解决Ubuntu桌面环境问题
  • 使用three.js 实现一个 类似烟花的 飞线发散效果
  • DBeaver 常用操作
  • AI教程_AI大模型 Prompt提示词工程 Langchain AI原生应用开发视频教程分享(IT营)
  • HTML5 `<button>` 标签深入全面解析
  • 遗传算法与深度学习实战(12)——粒子群优化详解与实现
  • OpenCV结构分析与形状描述符(15)计算 Hu 矩的函数HuMoments()的使用
  • 如何下载各个版本的tomcat-比如tomcat9
  • 搭建Windows下的Rust开发环境
  • 一、关系模型和关系代数,《数据库系统概念》,原书第7版
  • 永成防回水防回气装置脚踏实地老厂家
  • 信息化和精益化应当先做哪个?天行健王春城老师回答你
  • CVE-2021-4034: Suid提权pkexec本地提权漏洞
  • 【数据结构】【java】leetcode刷题记录--链表
  • 从视频中每隔10帧截取一帧并保存为图片
  • 快速幂算法
  • Origin2024中绘制多因子分组柱状图,直观展示不同组别内的数据变化!