在
Vue的
el-table-column组件中实现悬浮
显示效果有多种方法：
### 使用show
-overflow
-tooltip属性
当单元格内容超出时，可使用`show
-overflow
-tooltip`属性让其在鼠标悬浮时以弹窗形式
显示完整内容。示例代码如下：
```
vue
<template>
<div class="container">
<
el-table :data="demoList">
<
el-table-column lab
el="姓名" prop="name" width="90"></
el-table-column>
<
el-table-column lab
el="性别" prop="sex" width="80"></
el-table-column>
<
el-table-column lab
el="年龄" prop="age" width="70"></
el-table-column>
<
el-table-column show
-overflow
-tooltip prop="demo" lab
el="lab
el-name" width="120"></
el-table-column>
</
el-table>
</div>
</template>
<script>
export default {
data() {
return {
demoList: [
{ name: '张三', sex: '男', age: '18', demo: 'show
-overflow
-tooltip demo' },
]
};
}
};
</script>
```
这种方法适合简单的内容超出
显示场景，代码简洁，只需在`
el-table-column`标签中添加`show
-overflow
-tooltip`属性即可 [^2]。
### 使用
el-tooltip组件
当`show
-overflow
-tooltip`属性在单元格内容为空悬浮触发黑色悬浮框有问题时，可使用`
el-tooltip`组件替代。示例代码如下：
```
vue
<
el-table-column align="center" prop="enddate" lab
el="时间" width="2
50">
<template slot
-scope="scope">
<
el-tooltip class="item" effect="dark" :content="scope
.row
.enddate" placement="top" :disabled="scope
.row
.enddate
.length<10">
<div>
<p>{{scope
.row
.enddate}}</p>
</div>
</
el-tooltip>
</template>
</
el-table-column>
```
此方法灵活性更高，可以自定义悬浮框的样式、内容和位置等。同时可以通过`disabled`属性控制是否
显示悬浮框 [^3]。
### 在
el-table-column中使用
el-tooltip实现换逗号分隔行
显示
若需要在悬浮
显示数据时实现换逗号分隔行的效果，可在`
el-table-column`中使用`
el-tooltip`组件并结合自定义函数。示例代码如下：
```
vue
<template>
<
el-table :data="
tableData">
<
el-table-column prop="apsQty" lab
el=" 已排程数量" align="center">
<template #default="{ row }">
<
el-tooltip class="box
-item" effect="light" placement="left
-start">
<template #content>
<span v
-html="tooPlct(row
.hoverData)"></span>
</template>
<span style="cursor: pointer; color:#0094e0">{{row
.apsQty || '
-'}}</span>
</
el-tooltip>
</template>
</
el-table-column>
</
el-table>
</template>
<script>
const tooPlct = (val) => {
if (val) {
return val
.toString()
.replace(/,/g, '<br>');
}
else {
return '暂无数据';
}
};
export default {
data() {
return {
tableData: [
{ apsQty: 10, hoverData: '1,2,3,4' }
]
};
},
methods: {
tooPlct
}
};
</script>
```
这种方式适用于需要对悬浮
显示内容进行特殊处理的场景，可根据实际需求修改`tooPlct`函数来实现不同的内容转换 [^
5]。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1654
