vue、elementui、table 组件列文本过多，更多效果、更多组件化

最新推荐文章于 2025-02-21 16:19:41 发布

原创最新推荐文章于 2025-02-21 16:19:41 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue elementui #表格列文本更多

elementUI+vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在表格中处理长文本字段的方法，通过使用一个自定义的Vue组件，可以优雅地解决列宽不足导致的显示问题，避免了列间距浪费，提升了表格的阅读性和美观度。

如上图，这是表格的一角截图，公司的同款老板喜欢吧表所有字段堆上去，而且有一些是文本字段，就是说很多很多很多字可能还是废话放进表格，对放进表格，导致某一个列即便宽度还OK也要超大篇幅，导致其他列上下空白特别多，所以一般都需要一个更多的组件

<template>
    <div class="more-box" :class="{'open':isOpen}" :style="{'max-height':maxHeight+'px'}">
        <slot></slot>
        <el-link type="primary" @click="open()" class="btn-more">&gt;&gt;&gt;</el-link>
    </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({})
/**
 * 文本更多组件，超出后显示更多
 */
// @ts-ignore
export default class ComUiMore extends Vue {
    /**
     * 是否展开
     */
    private isOpen: boolean = false;

    @Prop({
        default: 100
    })
    private maxHeight: number;

    open() {
        this.isOpen = true;
    }
    mounted() {
        if (this.$el.clientHeight >= this.$el.scrollHeight) {
            this.isOpen = true;
            console.log(this.$el.innerText);
        }
    }
}
</script>



<style lang="scss" scoped>
.more-box {
    position: relative;
    &.open {
        max-height: none !important;
        .btn-more {
            display: none;
        }
    }

    .btn-more {
        position: absolute;
        display: block;
        bottom: 1px;
        right: 1px;
        z-index: 10;
        background-color: #fff;
    }
}
</style>

/**
 * 文本更多
 */
import comUiMore from '@/components/com-ui/com-ui-more.vue';
Vue.component('more', comUiMore);

<el-table-column>
    <template slot-scope="scope">
        <more :max-height="69" :key="scope.row.id">
            {{scope.row.experience}}
        </more>
    </template>
</el-table-column>

最后一串代码记得加上key，不让你会发现第一页数据展开后，第二页离奇的发现也被展开了，因为vue把组件复用了

组件复用官方文档

==============================================

很久很久以前也写过一个类似于csdn的查看更多功能