vue-element写一个可以切换角色的登录界面

好的，下面是一个简单的可以切换角色的登录界面的代码实现：

<template>
  <el-form :model="form" ref="form" label-width="80px">
    <el-form-item label="账号">
      <el-input v-model="form.account"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item label="角色">
      <el-radio-group v-model="form.role">
        <el-radio :label="0">普通用户</el-radio>
        <el-radio :label="1">管理员</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        account: '',
        password: '',
        role: 0 // 默认为普通用户角色
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 登录逻辑
          console.log('账号：' + this.form.account)
          console.log('密码：' + this.form.password)
          console.log('角色：' + this.form.role)
        }
      })
    }
  }
}
</script>

在这个登录界面中，我们使用了 Element UI 的表单组件，可以通过单选框来切换用户的角色。在登录逻辑中，我们可以根据用户选择的角色来进行不同的操作。