Question

我想让我的数据表屏蔽“密码”条目（在表中和对话框中）。该页面应该是帐户管理的管理员控制面板。我检查了文档，却不知道该怎么做。

我尝试对文本字段使用“掩码”，但无济于事。

<template>
<v-app>
  <v-content>
  <div>
    <v-toolbar flat color="white">
      <v-toolbar-title>Accounts:</v-toolbar-title>
      <v-spacer></v-spacer>
       <v-flex md4 mt-3>
          <v-text-field browser-autocomplete height="20px" full-width class="mx-3" flat label="Search" prepend-inner-icon="search" outline></v-text-field>
        </v-flex>

      <v-dialog v-model="dialog" max-width="500px">
        <template v-slot:activator="{ on }">
          <v-btn color="success" dark class="mb-2" v-on="on">Add Account</v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span class="headline">{{ formTitle }}</span>
          </v-card-title>

          <v-card-text>
            <v-container grid-list-xs>
              <v-layout>
                <v-flex xs12 sm6 md8>
                  <v-text-field v-model="editedItem.orgname" label="Organization Name"></v-text-field>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs12 sm6 md8>
                  <v-text-field v-model="editedItem.orgusername" label="Organization Username"></v-text-field>
                </v-flex>
              </v-layout>
              <v-layout>
                <v-flex xs12 sm6 md8>
                  <v-text-field v-model="editedItem.password" label="Password"></v-text-field>
                </v-flex>
              </v-layout>

            </v-container>

          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
            <v-btn color="blue darken-1" flat @click="save">Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-toolbar>

    <v-data-table  :headers="headers"  :items="orgname" class="elevation-1">
      <template v-slot:items="props">
        <td>{{ props.item.orgname }}</td>
        <td class="text-xs-left">{{ props.item.orgusername }}</td>
        <td class="text-xs-left">{{ props.item.password }}</td>

        <td class="justify-center layout px-0">
          <v-icon small class="mr-2"  @click="editItem(props.item)">
            edit
          </v-icon>
          <v-icon small @click="deleteItem(props.item)" >
            delete
          </v-icon>
        </td>
      </template>

    </v-data-table>
  </div>
  </v-content>
</v-app>
</template>

脚本

<script>
export default{
    data: () => ({
      dialog: false,
      headers: [
        {
          text: 'Organization Name',
          align: 'left',
          sortable: true,
          value: 'orgname'
        },
        { text: 'Organization Username', value: 'orgusername' , sortable: false},
        { text: 'Organization Password', value: 'password', sortable: false },

      ],
        orgname: [],
      editedIndex: -1,
      editedItem: {
        orgname: '',
        orgemail: '',
        password: ''
      },
      defaultItem: {
        orgname: '',
        orgemail: '',
        password: ''
      }
    }),

    computed: {
      formTitle () {
        return this.editedIndex === -1 ? 'Add Account' : 'Edit Info'
      }
    },

    watch: {
      dialog (val) {
        val || this.close()
      }
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.orgname = [
          {
            orgname: 'Student Organization',
            orgusername:'studorganization',
            password: 'studorganization'
          }

        ]
      },

      editItem (item) {
        this.editedIndex = this.orgname.indexOf(item)
        this.editedItem = Object.assign({}, item)
        this.dialog = true
      },

      deleteItem (item) {
        const index = this.orgname.indexOf(item)
        confirm('Are you sure you want to delete this?') && this.orgname.splice(index, 1)
      },

      close () {
        this.dialog = false
        setTimeout(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedIndex = -1
        }, 300)
      },

      save () {
        if (this.editedIndex > -1) {
          Object.assign(this.orgname[this.editedIndex], this.editedItem)
        } else {
          this.orgname.push(this.editedItem)
        }
        this.close()
      }
    }
  }
</script>

我希望它会被星号（*）遮盖，但是我不知道怎么做。（当前为纯文本格式）。

Answer 1

您可以在v文本字段中使用type="password"

<v-text-field 
  v-model="editedItem.password" label="Password"
  type="password">
</v-text-field>

如果要打开/关闭密码可见性，可以添加附加图标和数据属性：

data() {
  return {
    showPassword: false
  }
}

<v-text-field 
  v-model="editedItem.password" label="Password"
  :type="showPassword ? 'text' : 'password'"
  :append-icon="showPassword ? 'visibility' : 'visibility_off'"
  @click:append="showPassword = !showPassword"
  type="password">
</v-text-field>

在数据表中，如果要隐藏密码，只需将其替换为一些伪文本即可。更改

 <td class="text-xs-left">{{ props.item.password }}</td>

到

 <td class="text-xs-left">********</td>

您可以在Vuetify document

中查看密码示例

是否可以屏蔽数据表中的“密码”信息？

1 个答案: