全局自定义方法对表格数据过长省略显示并移入弹窗显示处理
时间: 2023-08-04 10:04:01 浏览: 70
如果要对表格数据进行省略显示,并在鼠标移入时弹出弹窗显示全部内容,可以使用以下方法:
1. 在全局中定义一个自定义方法,用于对表格中的数据进行省略处理。例如:
```javascript
Vue.filter('ellipsis', function(value, maxLength) {
if (value.length > maxLength) {
return value.slice(0, maxLength) + '...';
} else {
return value;
}
});
```
这个自定义方法可以将字符串截取到指定的长度,然后在末尾添加省略号。
2. 在表格中使用这个自定义方法进行数据处理。例如:
```html
<el-table-column prop="desc" label="描述">
<template slot-scope="scope">
<span v-bind:title="scope.row.desc">{{ scope.row.desc | ellipsis(10) }}</span>
</template>
</el-table-column>
```
这里使用了 `v-bind:title` 将原始的数据绑定到了 `title` 属性上,这样当鼠标移入时就可以显示全部内容。
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 | ellipsis(10) }}</span>
</template>
</el-table-column>
```
在这个例子中,我们定义了一个 `showPopup` 方法来显示弹窗,并将原始数据作为参数传递给这个方法。
需要注意的是,弹窗的显示和隐藏需要根据实际情况进行设置,可以使用 CSS 样式或 JavaScript 控制来实现。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)