本文主要是介绍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-popoverplacement="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>
实现了鼠标控制悬浮数据的显隐
这篇关于el-table-column叠加el-popover使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
