el-table-column叠加el-popover使用
需求:el-table-column有一列展示多个tag信息,实现点击tag展示tag信息以及tag对应的详细信息
table的数据格式
data:[
{
...,
isPopoverVisible:false,
},
{
...,
isPopoverVisible:false,
},
...
]
写法:
<el-table-column label="配置信息" prop="listName">
<template slot-scope="scope">
<el-popover
placement="bottom"
title="配置信息以及对应详情"
trigger="manual"
v-model="scope.row.isPopoverVisible"
>
<el-cascader-panel :options="scope.row.CopyList"></el-cascader-panel>
<template slot="reference">
<div @click="scope.row.isPopoverVisible = !scope.row.isPopoverVisible" style="cursor: pointer;">
<div style="display: inline-block;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;width: 200px;">
<el-tag type="info" style="margin-right: 5px;" v-for="item in scope.row.tableList" :key="item.index">{{ item.dbName }}</el-tag>
</div>
</div>
</template>
</el-popover>
</template>
</el-table-column>
实现了鼠标控制悬浮数据的显隐
原文地址:https://blog.csdn.net/weixin_44740072/article/details/137923998
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!