iview中renderHeader的用法

746 阅读1分钟

需求表格里点击表格头部小眼睛进行密文切换 设置一个全局的布尔值通过点击判断明文密文的切换

例如 
const password=ref<boolean>(false)
在获取接口里解密设置初始值
const getList=()=>{
    list(.,.,.,).then((res:any)=>{
         tableList.value=res.list.map((o:any)=>{
             //获取全部的参数
             ...o,
             pwdAES: aesDecrypt(o.要解密的参数)
             pwdState:false//定初始值状态
         }
        )
    })
}

 const columns = [
      {
        title: "密码",
        key: "token",
        render(h:any,params:any)=>{
          //空字符串
          let text="";
          if(!params.row.pwdState){//取反状态
            text="******"
          }else{
            text=params.row.pwdState
          }
          return h("div",text)
        }
        renderHeader(h:any,params:any)=>{
           return h("div",[
             h("span","密码")
             h("Icon",{
               props:{
                 type:`${!password.value?"md-eye-off":"md-eye"}`
                 color:"#c8c8c8",
                 size:15
               },
               style:{
                  marginLeft:"10px"
               }
               //调用点击的方法
               on:{
                click:()=>{
                   doPassword();
                }
               }
             })
           ])
        
        }
        resizable: true,
      },
    ]
    
    const doPassword=()=>{
       //点击取反
       password.value=!password.value;
       tableList.value=table.value.map((o:any)=>{
         ...o,
         pwdState:password.value
       })
    }
    ```