1 <el-table 2 ref="multipleTable" 3 :class="{ 'no-multiple': !isMultiple }" 4 @select="selectTable" 5 border 6 :key="isUpdate" 7 :data="tableData" 8 > 9 <el-table-column label="密码" prop="pwd"> 10 <template slot-scope="s"> 11 <div v-else-if="col.field == 'pwd'"> 12 <i v-if="s.row['pwdTemp'].indexOf('****')>-1" class="el-icon-view icon-eye" @click="view(s.$index, s.row)"></i> 13 <i v-else class="iconfont icon-yanjing-biyan icon-eye" @click="view(s.$index, s.row)"></i> 14 <span>{{ s.row['pwdTemp'] }}</span> 15 </div> 16 </template> 17 </el-table-column> 18 </el-table>
1 // 隐藏密码 2 hidePassword(val) { 3 let str = '' 4 for (let i = 0; i < val.length; i++) { 5 if (i == 0) { 6 const s = val.slice(i, 1) 7 str = str.concat(s) 8 } else if (i == val.length - 1) { 9 const s = val.slice(i - 1, i) 10 str = str.concat(s) 11 } else { 12 str = str.concat('*') 13 } 14 } 15 return str 16 }, 17 //显示隐藏密码操作,控制某一行数据密码的显示、隐藏 18 view(index, row) { 19 if (row['pwdTemp'].indexOf('****') > -1) { 20 this.$set(row,'pwdTemp',row['pwd']) 21 } else { 22 this.$set(row,'pwdTemp',this.hidePassword(this.tableData[index]['pwd'])) 23 } 24 this.tableData.splice(index,1,row) 25 this.isUpdate = !this.isUpdate; //每次改变key值则可以触发表格数据更新 26 }
标签:pwdTemp,el,val,index,str,生效,table,row From: https://www.cnblogs.com/xiaoqilaile/p/17863916.html