想问需要实现登录验证的弹窗功能，在登录实现的业务逻辑中，根据判断条件，弹出不同的弹框？

这是登录功能的UI：

<el-form-item class="btns_box">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="resetLoginForm">重置</el-button>
        </el-form-item>

这是登录验证的业务逻辑：

login () {
      this.$refs.loginformRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return false
        const { data: res } = await this.$http.post('http://43.143.0.76:8889/api/private/v1/ login', this.loginForm)
        console.log(res)
        if (res.status !== 0) return console.log('登录失败')
        console.log('登录成功')
      })
    },

这是element UI的弹窗样式与方法

<el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button><el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>

open1 () {
      this.$message('这是一条消息提示')
    },
    open2 () {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      })
    },

    open3 () {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      })
    },

    open4 () {
      this.$message.error('错了哦，这是一条错误消息')
    }
  }

想要获取子对象里面的每个对象里面的属性内容，打印出 undefined

async getAllData () {
      const { data: res } = await this.$http.get('http://127.0.0.1:4523/m1/2452239-0-default/api/tabledata')
      console.log(res)
      this.tableData = res.map(item => {
        return console.log(Object.keys(item).map(key => {
          return res[key]
        }))
      })

想表单上不呈现出弹窗样式，而是根据登录验证的判断跳出对应的弹窗