JeecgBoot前端列表字段显示隐藏

最新推荐文章于 2024-05-30 15:07:12 发布

bug0到1

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量710

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_55841258/article/details/132166086

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

JeecgBoot前端列表字段显示隐藏

一、效果图

点击蓝色字体 “ 点击查看 ”，显示密码。根据列表索引，点击其中的一个，其他的自动隐藏。
![在这里插入图片描述](https://img-blog.csdnimg.cn/7f9e26ec35e5418fa971345802661189.pn

二、原理

解释： 给对应字段安装插槽，插槽中编写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';
          }
        }
      },

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