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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
杏林同学录(一)
2006/10/09 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python集合删除多种方法详解
2020/02/10 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
装修致歉信
2014/01/15 职场文书
领导调研接待方案
2014/02/27 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
公司承诺书格式
2014/05/21 职场文书
铣工实训报告
2014/11/05 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
三好学生个人总结
2015/02/15 职场文书
优秀英文求职信范文
2015/03/19 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js