iview 隐藏显示该行密码

一尾鱼汤

已于 2022-02-23 14:06:48 修改

阅读量598

点赞数

分类专栏： iview使用小结文章标签： javascript vue.js 前端

于 2021-12-31 14:21:03 首次发布

本文链接：https://blog.csdn.net/qq_42105170/article/details/122255326

版权

iview使用小结专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何在iview的表格中结合小眼睛图标，实现特定行的密码显示和隐藏功能。强调了在处理select组件的默认值时避免触发on-change事件，并推荐将遍历事件置于data()中进行管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**通过小眼睛图标的睁眼闭眼实现对某一行的显示和隐藏，需要将该行的状态和眼睛图标绑定显示 **

// 代码截取
// 为源数据的每一个元素添加一个显示属性‘pwdShow’
         let len = this.tableData.length
         for(let i = 0 ; i <len ; i++) {
           this.tableData[i].pwdShow = false
         }
//当点击该行的小眼睛时，拿到row的_index, 切换源数据的显示属性
     this.tableData[row._index].pwdShow = !this.tableData[row._index].pwdShow

iview 表格中的select组件，赋默认值时就会触发on-change事件

尽量将遍历事件放在data（）中

//render 循环数据，需要换行
       render:(h,params)=>{
            return h('div',
              [
                h('p', "审批提交" + ":" + params.row.createBy),
                params.row.reccordData.map((item)=>{
                  return  h('p',item.remark + ':' + item.transferUserName)
                }),
              ])
          }