Vue3问题：如何实现El-table内容超出省略提示？第三条很少有人会("Vue3技巧：El-table内容超出显示省略提示，掌握这3招（第3条少有人知）")

一、引言

在使用Vue3和Element Plus进行开发时，表格（El-table）是一个非常常用的组件。但是，表格中的单元格内容有时会出于过长而显示不完全，这就需要我们通过一些方法来实现内容的省略提示。本文将介绍三种实现El-table内容超出显示省略提示的方法，其中第三种方法很少有人知道，但非常实用。

二、方法一：使用CSS样式实现省略提示

最明了的方法是通过CSS样式来控制单元格内容的显示。具体操作如下：

        // 在El-table的单元格样式中添加以下CSS样式
        .el-table .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    

这段代码的作用是：当单元格内容超出宽度时，会隐藏超出部分，并显示省略号（...）提示。

三、方法二：使用El-table-column的show-overflow-tooltip属性

Element Plus提供了show-overflow-tooltip属性，可以直接在El-table-column组件中使用，实现超出内容显示省略提示。示例代码如下：

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="address" label="地址" show-overflow-tooltip />
        </el-table>
    

在这个示例中，我们给地址列添加了show-overflow-tooltip属性，当内容超出单元格宽度时，会显示一个提示框，展示完整的内容。

四、方法三：使用自定义组件实现错综内容的省略提示

对于一些错综的内容，如包含HTML标签的字符串，以上两种方法也许无法满足需求。这时，我们可以通过自定义组件来实现省略提示。以下是一个明了的示例：

        // 创建一个名为Ellipsis的Vue组件
        <template>
            <div class="ellipsis" :title="title">
                <slot></slot>
            </div>
        </template>
        <script>
        export default {
            name: 'Ellipsis',
            props: {
                title: {
                    type: String,
                    default: ''
                }
            }
        }
        </script>
        <style scoped>
        .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }
        </style>
    

然后，在El-table-column中使用这个自定义组件：

        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column label="地址" width="180">
                <template #default="{ row }">
                    <ellipsis :title="row.address">
                        {{ row.address }}
                    </ellipsis>
                </template>
            </el-table-column>
        </el-table>
    

在这个示例中，我们创建了一个名为Ellipsis的自定义组件，它接收一个title属性和一个插槽。在El-table-column的默认插槽中，我们使用Ellipsis组件包裹了地址列的内容，并传递了title属性。这样，当地址内容超出单元格宽度时，会显示省略号提示，并且鼠标悬停时还会显示完整的地址。

五、总结

本文介绍了三种在Vue3和Element Plus中实现El-table内容超出显示省略提示的方法。第一种方法是使用CSS样式，第二种方法是使用Element Plus提供的show-overflow-tooltip属性，第三种方法是使用自定义组件。掌握这三种方法，可以应对不同场景下的需求，减成本时间表格内容的可读性。

本文由IT视界版权所有,禁止未经同意的情况下转发