ele对话框,表单

最新推荐文章于 2024-09-15 21:53:26 发布

接受卍制裁

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量57

点赞数

分类专栏：快速cv 文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/weixin_54206707/article/details/131254544

版权

快速cv 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js和TypeScript编写的模板，展示了如何创建一个用于修改用户信息的对话框。对话框包含用户名、邮箱和手机号的输入字段，但所有字段都处于只读状态。用户可以点击取消或确定按钮关闭对话框，但无法编辑信息。

摘要由CSDN通过智能技术生成


<template>

    <el-button text @click="dialogFormVisible1 = true">
        修改
    </el-button>
  
    <el-dialog v-model="dialogFormVisible1" title="修改用户信息">
      <el-form :model="form">
        <el-form-item  label="用户名" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item  label="邮箱" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item  label="手机号" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="form.name" autocomplete="off" />
        </el-form-item>
     
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible1 = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  

  const dialogFormVisible1 = ref(false)
  const formLabelWidth = '140px'
  
  const form = reactive({
    name: '',
  })
  </script>
  <style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  </style>