全局自定义方法对表格数据过长省略显示并移入弹窗显示处理,不使用过滤器
时间: 2024-03-06 14:48:35 浏览: 14
如果不想使用过滤器,也可以使用以下方法对表格数据进行省略显示,并在鼠标移入时弹出弹窗显示全部内容:
1. 在表格中使用 `title` 属性来显示原始数据。例如:
```html
<el-table-column prop="desc" label="描述">
<template slot-scope="scope">
<span v-bind:title="scope.row.desc">{{ scope.row.desc }}</span>
</template>
</el-table-column>
```
这里直接将原始数据绑定到了 `title` 属性上,这样当鼠标移入时就可以显示全部内容。
2. 使用 CSS 样式来实现省略显示。例如:
```css
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
这里使用了 `text-overflow: ellipsis` 属性来实现省略号的显示。
3. 在鼠标移入时显示弹窗。可以使用 `@mouseenter` 事件监听器来监听鼠标移入事件,然后在回调函数中显示弹窗。例如:
```html
<el-table-column prop="desc" label="描述">
<template slot-scope="scope">
<span v-bind:title="scope.row.desc" @mouseenter="showPopup(scope.row.desc)">{{ scope.row.desc }}</span>
</template>
</el-table-column>
```
在这个例子中,我们定义了一个 `showPopup` 方法来显示弹窗,并将原始数据作为参数传递给这个方法。
需要注意的是,弹窗的显示和隐藏需要根据实际情况进行设置,可以使用 CSS 样式或 JavaScript 控制来实现。