ElementUI中弹出对话框的基本使用

 <el-dialog title="添加角色" :visible.sync="addRoleIsShow">
      <el-form :model="addRole">
        <el-form-item label="角色名称" :label-width="roleLabelWidth" >
          <el-input v-model="addRole.roleName" class="roleInput" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="角色描述" :label-width="roleLabelWidth" >
          <el-input v-model="addRole.roleDesc" class="roleInput" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRoleIsShow= false">取 消</el-button>  .//这里的取消可以直接设置值,不需要去调用函数设置
        <el-button type="primary" @click="addRoleHand">确 定</el-button>
      </div>
    </el-dialog>

必须用到的数据:

  • :visible.sync 该属性控制弹出dialog的显示和隐藏,必须绑定一个值。
<el-dialog title="添加角色" :visible.sync="addRoleIsShow">    
  • 表单对象需要绑定一个对象 ,在这里addRole是一个对象,里面有两个值 一个roleName 和roleDesc
<el-form :model="addRole">

让label和input输入框在同一行

设置label的宽度为100px

:label-width="roleLabelWidth"
<style>
.el-main {
  text-align: left;    //弹窗标题在左上方
  line-height: 30px;   //弹窗更好看 
}
</style>
发布了245 篇原创文章 · 获赞 31 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览