JeecgBoot前端页面列表插槽移入和点击事件

JeecgBoot前端页面列表插槽移入和点击事件

一、效果图

图一： 带有鼠标移入事件和点击事件，鼠标移入红框字体，自动弹出气泡卡片，显示对应全部内容。鼠标不动，点击红框文字，触发点击事件，例如达到弹框modal效果。也可以自定义其他事件。
图二： JeecgBoot前端框架自带的效果(字段文字太长，显示固定长度，鼠标移入后，显示全部内容)。详情可以参考jeecg vue 框架问题及解决

二、图一效果代码：

1.修改columns表头数组中对应字段，添加 scopedSlots插槽，值可以随便自定义，方便自己区分。

{
    title:'记录',
    align:"center",
    dataIndex: 'seeRecord',
    scopedSlots:{customRender: "showSeeRecord"},
},

2.在列表中添加如下代码： slot="showSeeRecord"中的字符，需要上方插槽值对应。

   
      
      {{text.substring(0,6)}}
  

三、图二效果代码：此处是简单示例

修改columns表头数组中对应字段，直接在添加customRender即可

{
    title:'记录',
    align:"center",
    dataIndex: 'seeRecord',
    customRender:function(text){
       return ()
    }
 },

四、效果三，字段插槽中只有点击事件

修改和添加代码的位置和图一一样，只是此处的简单一点

修改columns表头数组中对应字段

{
   title: '公司名称',
   align: 'center',
   dataIndex: 'companyName',
   scopedSlots: { customRender: 'companyName' }
},

在列表a-table中添加

   {{ text }}

一个在学习的开发者，勿喷，欢迎交流