Element UI 中 el-table el-table-column 实现密码的睁眼闭眼

不想敲代码的程序(>^ω^<)喵

于 2022-08-19 15:52:02 发布

858

本文链接：https://blog.csdn.net/qq_40173750/article/details/126426107

版权

代码如下

思路：列表渲染的时候，给一个状态设置默认值，点击睁眼闭眼操作的时候，改变当前行的状态，实现睁眼闭眼操作

<el-table-column label="平台密码" min-width="160" >
      <template v-slot="{row}" >
              <div class="flex">
                     <div  v-if="!row.show">
                     <span class="fs-14">******</span>
                     <svg-icon slot="reference" icon-class="close-eye" class="icon" @click="handleShow(row)"></svg-icon>
                      </div>
                       <div v-else>
                      <span class="fs-14" v-if="row.show">{{row.password}}</span>
                     <svg-icon slot="reference" icon-class="open-eye" class="icon" @click="handleShow(row)"></svg-icon>
                       </div>
                        </div>
                    </template>
 </el-table-column>



handleShow(row){ 
            row.show=!row.show
        },

列表渲染的时候给一个状态
 data.records.forEach((item)=>{
          item.show=false;



列表整体代码
  async getList(num){
            if(this.isLoading){
                return;
            }
            if(num){
                this.searchData.page=1
            }
            this.isLoading=true
            try{
                let {data}=await JTAPI.reptileQueryUserInfo({
                    page:this.searchData.page,
                    limit:this.searchData.limit,
                    startDate:this.searchData.time?this.searchData.time[0]:'',
                    endDate:this.searchData.time?this.searchData.time[1]:'',
                    platformCode:this.searchData.markPlatform, //平台类型
                    usernameContent:this.searchData.content, //账号输入框

                });
                data.records.forEach((item)=>{
                    item.show=false;
                })
                this.tableData=data.records;
                this.total=data.total
            }catch(err){
                 console.log(err)
            }
            this.isLoading=false
        },