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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
PHP 时间日期操作实战
2011/08/26 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
浅谈python3中input输入的使用
2019/08/02 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
计算机学生求职信范文
2014/01/30 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
教师学习心得体会范文
2016/01/21 职场文书
MySQL中order by的执行过程
2022/06/05 MySQL