vue+elementui 实现新增和修改共用一个弹框的完整代码


Posted in Vue.js onJune 08, 2021

element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库,而手机端有对应框架是 Mint UI 。整个ui风格简约,很实用,同时也极大的提高了开发者的效率,是一个非常受欢迎的组件库。

一、新增

1、新增按钮

vue+elementui 实现新增和修改共用一个弹框的完整代码

2、新增事件 在methods中,用来打开弹窗,
dialogVisible在data中定义使用有true或false来控制显示弹框

vue+elementui 实现新增和修改共用一个弹框的完整代码

**3、新增确定,弹框确定事件 ,新增和修改共用一个确定事件,使用id区别

vue+elementui 实现新增和修改共用一个弹框的完整代码

**3、新增事件

调新增接口,判断是否有id,没有就调新增接口

vue+elementui 实现新增和修改共用一个弹框的完整代码

二、修改

2-1、修改按钮 ,表格行编辑按钮使用scope.row拿到当前行的数据

vue+elementui 实现新增和修改共用一个弹框的完整代码

2-2、修改事件, 把当前行数据赋值给表单,就把当前行数据回显出来了

vue+elementui 实现新增和修改共用一个弹框的完整代码

2-3、修改事件

修改接口,判断是否有id,有就调修改接口**

vue+elementui 实现新增和修改共用一个弹框的完整代码

下面直接上代码了

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 新增按钮 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
          <el-button type="primary" @click="onhandAdd">添加角色</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" border="" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :class="['bdbottom',i1 === 0? 'bdtop' : '', 'vcenter'] "
              :gutter="20"
              :span="6"
              v-for="(item_ong,i1) in scope.row.children"
              :key="item_ong.id"
            >
              <!-- 一级 -->
              <el-col :span="5">
                <el-tag>{{item_ong.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 二级和三级 -->
              <el-col :span="19">
                <!-- 二级权限 -->
                <el-row v-for="(item_two,i2) in item_ong.children" :key="i2">
                  <el-col :span="6">
                    <el-tag type="success">{{item_two.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      v-for="(item_three,i3) in item_two.children"
                      :key="i3"
                    >{{item_three.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index" width="80"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" prop="id">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button type="warning" icon="el-icon-delete" size="small">删除</el-button>
            <el-button type="danger" icon="el-icon-edit" size="small">权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增编辑弹框 -->
    <el-dialog
      :title="addtitle"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="refRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      addtitle: "添加角色",
      ruleForm: {
        roleName: "",
        roleDesc: ""
      },
      allid: "",
      // 验证规则
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        roleDesc: [{ required: true, message: "角色描述", trigger: "blur" }]
      }
    };
  },
  created() {
    this.tabList();
  },
  methods: {
    //   表格接口列表
    tabList() {
      this.$api.jurisdiction.rolelist().then(res => {
        console.log(res.data.data, "]]]]]]]");
        this.tableData = res.data.data;
      });
    },
    // 新增
    onhandAdd() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row.id);
      this.dialogVisible = true;   //显示弹框
      this.ruleForm = row;         //row当前行数据,把当前行的数据赋值给 表单
      this.allid = row.id;         //把id存全局
    },
    // 确定
    dialogVisibleConfirm() {
      // 新增接口
      if (!this.allid) {
        this.$api.jurisdiction.addrole(this.ruleForm)
          .then(res => {
            // console.log(res,"新增")
            this.$message.success("添加成功");     //新增成功消息提示
            this.$refs.refRuleForm.resetFields(); //清空表格数据
            this.dialogVisible = false;           //关闭弹框
            this.tabList();                       //刷新列表
          })
          .catch(res => {
            this.$message.error("添加失败");
          });
      } else {
        // 修改接口
        let id = this.allid
        let params = {
          roleName:this.ruleForm.roleName,
          roleDesc:this.ruleForm.roleDesc,
        }
        this.$api.jurisdiction.edtrole(id,params)
          .then(res => {
            console.log(res,"修改")
            this.$message.success("修改成功");
            this.$refs.refRuleForm.resetFields();
            this.dialogVisible = false;
            this.tabList();
          })
          .catch(res => {
            this.$message.error("修改失败");
          });
      }
    }
  }
};
</script>

<style scoped>
.bdtop {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.bdbottom {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  padding-top: 10px;
}
.el-tag {
  margin: 10px 0px;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>

以上就是vue+elementui 实现新增和修改共用一个弹框的完整代码的详细内容,更多关于vue elementui弹框的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php创建图像具体步骤
2017/03/13 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python字符串中的单双引
2017/02/16 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
django中的数据库迁移的实现
2020/03/16 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
报关专员求职信范文
2014/02/22 职场文书
《王二小》教学反思
2014/02/27 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
小学生安全责任书
2014/07/25 职场文书
庆祝国庆节标语
2014/10/09 职场文书
企业承诺书格式范文
2015/04/28 职场文书
大学生团日活动总结
2015/05/06 职场文书
2016年国陪研修感言
2015/11/18 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python