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 的异常处理机制
Nov 30 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 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
php生成txt文件标题及内容的方法
2014/01/16 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php unlink()函数使用教程
2018/07/12 PHP
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
bootstrap table小案例
2016/10/21 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
wxPython使用系统剪切板的方法
2015/06/16 Python
python字典DICT类型合并详解
2017/08/17 Python
python如何为创建大量实例节省内存
2018/03/20 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
python的flask框架难学吗
2020/07/31 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
总经理助理的八要求
2013/11/12 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
家长高考寄语
2015/02/27 职场文书
贷款收入证明范本
2015/06/12 职场文书
提档介绍信范文
2015/10/22 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
Python中itertools库的四个函数介绍
2022/04/06 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技