vue+elementui实现新增和修改共⽤⼀个弹框的完整代码⽬录
⼀、新增
⼆、修改
element-ui是由饿了么前端团队推出的⼀套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌⾯组件库，⽽⼿机端有对应框架是 Mint UI 。整个ui风格简约，很实⽤，同时也极⼤的提⾼了开发者的效率，是⼀个⾮常受欢迎的组件库。
⼀、新增
1、新增按钮
2、新增事件在methods中，⽤来打开弹窗，
dialogVisible在data中定义使⽤有true或false来控制显⽰弹框
**3、新增确定，弹框确定事件，新增和修改共⽤⼀个确定事件，使⽤id区别
**3、新增事件
调新增接⼝，判断是否有id，没有就调新增接⼝
⼆、修改
2-1、修改按钮，表格⾏编辑按钮使⽤w拿到当前⾏的数据
2-2、修改事件，把当前⾏数据赋值给表单，就把当前⾏数据回显出来了
2-3、修改事件
修改接⼝，判断是否有id，有就调修改接⼝**
下⾯直接上代码了
<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="" >
<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) w.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, w)"
>编辑</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="leName"></el-input>
</el-form-item>
<el-form-item label="⾓⾊描述" prop="roleDesc">
<el-input v-model="leDesc"></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: "",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。