vue封装添加编辑模态框共用的方法

最新推荐文章于 2024-04-18 21:20:44 发布

程序猿_“大神”

最新推荐文章于 2024-04-18 21:20:44 发布

阅读量678

点赞数 2

分类专栏： vue项目中的方法逻辑文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/dyx001007/article/details/127574675

版权

本文介绍如何在Vue项目中利用ElementUI封装一个用于添加和编辑操作的模态框组件。通过在data中定义变量，并结合HTML代码实现模态框的打开。点击‘添加’或‘编辑’按钮会触发相应模态框，点击确认按钮时进行添加或编辑的判断。

摘要由CSDN通过智能技术生成

在data里面设置变量

      dialog: {
        show: false,
        title: "",
        option: "",
      },

html代码

//添加
<el-button type="primary" @click="addRoles">添加角色</el-button>

//编辑
<el-table-column label="操作" width="300px">
    <template slot-scope="scope">
       <el-button size="mini" type="primary" icon="el-icon-edit" @click="eitRoles(scope.row)">编辑</el-button>
    </template>
</el-table-column>

//模态框
    <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="30%">
      
      <el-form
        :model="ruleForm"
        status-icon
        :rules="from_rules"
        ref