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

el-tab-pane 的label怎么显示很多数据

问:

el-tab-pane 的label怎么显示很多数据

回答:

<el-tabs :tab-position="'left'" style="height: 100%; " @tab-click="onTabClick">
    <el-tab-pane
        v-for="(item, index) in activities"
        :label="item.timestamp"
        :key="index">
        <span slot="label">
            <div style="display: flex; flex-direction: column; justify-content:center; height: 100%; text-align: left; margin-left: 25px;">
                <div style="font-size: 14px;">{{ item.timestamp }}</div>
                <div style=" font-size: 14px">{{ item.actionPeople }}</div>
                <div style=" font-size: 14px;">{{ item.actionNote }}</div>
            </div>
        </span>
    </el-tab-pane>
</el-tabs>
<style scoped lang="scss">
    ::v-deep .el-tabs__item {
    line-height: 20px;//调节三行文字之间的距离
    height: 100px;//调节标签页之间的距离
}
</style>

参考链接:el-tabs内容标签el-tab-pane多行显示-CSDN博客


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

相关文章:

  • 搭建prometheus+grafana监控系统抓取Linux主机系统资源数据
  • 【Leetcode-找到所有数组中消失的数字】利用标记出现数组中出现过的数字解决数组中消失的数字问题
  • 【开源免费】基于SpringBoot+Vue.JS共享汽车管理系统(JAVA毕业设计)
  • Cannot find -lgL
  • 【IEEE出版,连续4年EI收录,检索稳定 |南京航空航天大学主办,航空航天交叉研究院承办】第五届传感器与信息技术国际学术会议(ICSI 2025)
  • 如何从 Keycloak 的 keycloak-themes.jar 中提取原生主题并自定义设置
  • Chapter 4.6:Coding the GPT model
  • 【python进阶——用类实现数据组织】
  • LeetCode 热题 100 | 双指针
  • Git:Cherry-Pick 的使用场景及使用流程
  • 基于Java+SpringMvc+Vue技术的宠物分享平台
  • 省森林防火应急指挥系统
  • 2024 年 8 月公链行业研报:Layer 1、比特币 Layer 2 和以太坊 Layer 2 趋势分析
  • 构建高效的进程池:深入解析C++实现
  • 解决:离线部署Docker容器(使用Docker现有容器生成镜像,将镜像打包成tar并发布到离线服务器中)
  • uni-app支付宝、微信小程序实现拨打电话uni.makePhoneCall
  • 《拉依达的嵌入式\驱动面试宝典》—操作系统篇(九)
  • 又更新了一个list转树状结构的工具类
  • 辅助--Inspector
  • QT + Opencv 实现灰度模板匹配
  • SVM赛道概览:MoveVM落地,SVM能走多远