1.以本人项目为例 修改 新增使用同一个模态框
<el-button type="warning" @click="AddCategory">新增一级分类目录</el-button>
<Dialog ref="myDialog" @updateViews="updateViews" :input="input" :cid="cid"></Dialog>
import Dialog from './Dialog.vue'
export default {
components:{
Dialog,
},
}
2.点击新增修改按钮时打开模态框
//树节点的内容区的渲染 Function Function(h, { node, data, store })
renderContent(h, { node, data, store }) {
// console.log('树节点的内容区的渲染 Function',node,data);
return (
<span class="custom-tree-node">
<span class='name'>{data.name}</span>
{data.type == 1 ? <span style="width:300px;disply:flex;justify-content: space-between;">
<el-button class='mini' on-click={() => this.append(data)} icon="el-icon-plus">新增</el-button>
<el-button class='mini' on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
<el-button class='mini' type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
</span> : <span>
<el-button class='mini' on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
<el-button class='mini' type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
</span>}
</span>);
},
3. 定义新增修改方法,打开模态框,并且给模态框设置标题
// AddCategory 新增一级分类接口
AddCategory(){
// 1.打开对话框
this.$refs.myDialog.dialogVisible = true;
// 2.新增分类
// this.insertCategory();
// 给弹框设置标题
this.$refs.myDialog.title = '新增一级分类'
},
//新增子类---------------------------------
append(data) {
console.log('新增子类');
// 1.打开对话框
this.$refs.myDialog.dialogVisible = true;
// 给弹框设置标题
this.$refs.myDialog.title =`新增${data.name}的分类子目录`;
// this.input = {name:data.name,cid:data.cid};
this.cid = data.cid;
},
4.在点击按钮时,修改模态框状态,默认dialogVisible: false,使用this.$refs.myDialog.dialogVisible = true;打开模态框,无论修改还是增加,都是点击模态框中的确认按钮,出触发onsubmit方法.根据把标题字段区别,判断操作为新增或者修改。在最后需要通知父组件更新视图。
onsubmit() {
if(this.title === "新增一级分类")
{
// 1.新增接口
this.insertCategory(this.form.name);
}else if(this.title === "修改分类名称"){
// 1. 修改接口
this.updateCategory(this.form.id,this.form.name);
}else{
// 新增子类目接口
this.insertItemCategory(this.form.name,this.cid);
console.log("---------",this.form.name,this.cid)
}
// 2.关闭弹框
this.dialogVisible = false;
//清空弹框
this.form = [];
// 通知父组件更新视图
this.$emit('updateViews');
},
--------------父组件中,更新视图
<!-- 弹框--添加修改内容---弹框展示 -->
<Dialog ref="myDialog" @updateViews="updateViews" :input="input" :cid="cid"></Dialog>
// 更新视图
updateViews(){
this.itemCategory();
},
5.修改时,已有数据需要回显,在主页面中定义input,使用对象传递参数,在弹框页面,使用props接收父组件传递的参数。
-------------------主页面
return {
input: '',
cid: '',
data: [{
id: 1,
name: '一级 1',
children: [{
id: 4,
name: '二级 1-1'
}]
}]
}
---------------------弹框页面
export default {
props:['input','cid'],
}
----------------监听事件,数据发生变化时,调用
watch:{
input(val){
this.form.name = val.name;
this.form.id = val.id;
}
},
标签:vue,name,form,cid,新增,弹框,共用,data,icon
From: https://blog.csdn.net/qq_55961367/article/details/139603989