el-tabs内容标签el-tab-pane多行显示

最新推荐文章于 2024-03-08 10:46:14 发布

爆炸哈斯卡

最新推荐文章于 2024-03-08 10:46:14 发布

阅读量4.9k

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/baidu_28502503/article/details/125261748

版权

想通过el-tabs实现这样一个标签有多行文字的效果，如下图。

切换的效果如下

官方的组件拉过来以后做了如下改动，通过插槽slot插入了三个div

<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中调节.el-tabs__item中line-height和height的高度，代码如下

<style scoped lang="scss">
    ::v-deep .el-tabs__item {
    line-height: 20px;//调节三行文字之间的距离
    height: 100px;//调节标签页之间的距离
}
</style>

数据源如下

activities: [{
        content: '视力检查报告',
        timestamp: '2022-05-01',
        actionPeople: '录入员1',
        actionNote: '录入信息完毕'
      }, {
        content: '屈光检查报告',
        timestamp: '2022-04-02',
        actionPeople: '录入员2',
        actionNote: '医嘱信息完毕'
      }, {
        content: '眼压检查',
        timestamp: '2022-03-02',
        actionPeople: '录入员3',
        actionNote: '内容错误'
      }, {
        content: '眼底图像检查',
        timestamp: '2022-02-02',
        actionPeople: '录入员4',
        actionNote: '图片不清晰'
      }]

新人遇到问题，特此记录一下。