怎么使表格中的表具地址”列:黑色字体,内容做前省略,最多显示15字符,超出部分显示“...”,鼠标悬浮显示完整内容
时间: 2024-12-16 12:28:17 浏览: 52
要在表格中实现“表具地址”列的内容前省略,并限制显示15个字符,超出部分显示为“...”,并且鼠标悬停时显示完整内容,可以使用 Vue 的自定义渲染插槽和 CSS。
以下是具体步骤:
### 1. 自定义渲染插槽
在 `columns` 中为“表具地址”列添加一个自定义渲染插槽。
```javascript
{
title: '表具地址',
align: 'center',
width: 120,
dataIndex: 'address',
scopedSlots: { customRender: 'addressSlot' }
},
```
### 2. 添加自定义渲染方法
在 `<template>` 中添加 `addressSlot` 的模板。
```html
<template slot="addressSlot" slot-scope="text">
<span class="ellipsis" title="{{ text }}">
{{ text.slice(-15) }}
</span>
</template>
```
### 3. 添加 CSS 样式
在样式部分添加 `.ellipsis` 类来实现前省略和悬停效果。
```css
<style scoped>
.ellipsis {
display: inline-block;
max-width: 100px; /* 根据实际宽度调整 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ellipsis:hover {
white-space: normal;
word-wrap: break-word;
z-index: 1000;
position: relative;
background-color: rgba(255, 255, 255, 0.9);
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
```
### 4. 解释
- **scopedSlots**: 使用 `scopedSlots` 定义了 `addressSlot` 模板,该模板会替换默认的单元格内容。
- **slice(-15)**: 从字符串的末尾开始取 15 个字符。
- **title="{{ text }}"**: 设置 `title` 属性,当鼠标悬停时显示完整内容。
- **CSS**:
- `display: inline-block`: 使元素成为行内块元素。
- `max-width: 100px`: 限制最大宽度,防止内容溢出。
- `overflow: hidden`: 隐藏溢出内容。
- `white-space: nowrap`: 禁止换行。
- `text-overflow: ellipsis`: 显示省略号。
- `hover`: 当鼠标悬停时,更改样式以显示完整内容。
这样,表格中的“表具地址”列将只显示最后15个字符,超部分会被省略,并且鼠标悬停时会显示完整内容。
阅读全文
相关推荐

















