element plus table属性show-overflow-tooltip鼠标悬浮复制
时间: 2024-01-19 16:04:33 浏览: 225
根据引用[1]中提到的,element plus的table-column组件的show-overflow-tooltip属性可以实现当表格单元格内容过长时,在单元格内部显示省略号,并且当鼠标悬浮在单元格上时,可以复制单元格的内容。
以下是一个示例代码,演示了如何使用element plus的table-column组件的show-overflow-tooltip属性以及如何实现鼠标悬浮复制单元格内容的功能:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' }
]
};
}
};
</script>
```
在上述代码中,我们使用了element plus的el-table和el-table-column组件来展示表格数据。在el-table-column组件中,我们给姓名列添加了show-overflow-tooltip属性,这样当姓名列的内容过长时,会显示省略号,并且当鼠标悬浮在单元格上时,可以复制单元格的内容。
阅读全文