JeecgBoot前端列表字段显示隐藏
一、效果图
点击蓝色字体 “ 点击查看 ”,显示密码。根据列表索引,点击其中的一个,其他的自动隐藏。
二、原理
解释: 给对应字段安装插槽,插槽中编写a标签,可以刷新本页。在点击事件中动态获取class元素,设置css样式切换显示及隐藏。
三、代码部分
1、字段中配置插槽
{
title: '密码',
align: "center",
width: 100,
dataIndex: 'showPassword',
scopedSlots: { customRender: 'showPassword' }
},
2、 a-table标签中编写对应插槽。
slot="showPassword"中的showPassword,须和上面字段中配置的 scopedSlots 一致。
<span slot="showPassword" slot-scope="text,r,index">
<a href="#" class="showPwd" style="display: inline" @click="toToSeePassword(index)">点击查看</a>
<span class="pwd hide" style="display: none">{{text}}</span>
</span>
3、 编写点击事件方法
toToSeePassword(index){
var pass1 = document.getElementsByClassName('showPwd');
var pass2 = document.getElementsByClassName('pwd hide');
console.log("pass1",JSON.stringify(pass1))
for (var i in pass1){
if(i==index){
pass1[index].style.display = 'none';
pass2[index].style.display = 'inline';
}else{
pass1[i].style.display = 'inline';
pass2[i].style.display = 'none';
}
}
},
一个在学习的开发者,勿喷,欢迎交流