element使用el-table和el-popover结合使用,实现鼠标移入标题栏显示气泡卡片

  • 先看效果:鼠标移入中上方显示气泡
  • element使用el-table和el-popover结合使用,实现鼠标移入标题栏显示气泡卡片_第1张图片

 实现思路:使用插槽:可以通过标记顺序来看,可以忽略序号1上方的代码(这边我是根据需求,进行了一个文字通过状态值进行了显示判断)

element使用el-table和el-popover结合使用,实现鼠标移入标题栏显示气泡卡片_第2张图片

序号1
  1.  placement="top":气泡卡片显示位置(我这边是在上方显示,根据需求更改)
  2. trigger:显示方式我这边是划入显示
  3. title:标题名称
  4. :content="气泡卡片显示的字段" (scope.row.xxxx当前行的字段)

 序号2

  1.         需要使用插槽:#reference

 序号3 

  1. 如果气泡卡片需要两行显示,直接使用标签换行直接使用br标签即可:看看示例
  2. element使用el-table和el-popover结合使用,实现鼠标移入标题栏显示气泡卡片_第3张图片

 

你可能感兴趣的:(vue.js,前端,javascript)