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 }
