### 问题描述
第一次在社区提问题,如有不妥,还请包涵。
在项目中遇到的一个问题。可能涉及到element-ui。现在有主组件m,子组件c,el-table组件t和el-form组件f。
我将回传到m的数据展示在t中,又以slot的形式通过data传给c,将c的数据展现到f中(就是一个修改功能)。本身是个很简单的逻辑,可我发现在我修改f的数据的时候,m的表格数据也会跟着改变,这实在是蒙了圈,说实话完全没有解决思路。
### 问题出现的环境背景及自己尝试过哪些方法
总之先试着排除了一下全局数据的问题。该项目是没有用到任何全局数据的,也没用到vuex。试了下把.sync换了个变量修饰,没被修饰到的变量并没有发生这种情况。
### 相关代码
主组件:
<el-table :data="tableData">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="id"></el-table-column>
<el-table-column prop="code" label="容器编号"></el-table-column>
<el-table-column prop="warehouseCode" label="仓库编码"></el-table-column>
...
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑
</el-button>
...
<itemCRUDDialog :show.sync="diaOpen" :title="title"
:switch="switch1" :diaForm="diaForm"
:containerType="containerType" />
...
handleUpdate(row) {
this.diaForm = row
this.switch1 = true
this.title = '修改容器'
this.diaOpen = true
}
子组件:
<el-dialog
:title="title"
:visible.sync="visible"
width="700px"
append-to-body
@close="$emit('update:show', false)"
>
<el-form ref="diaForm" :title="title" :model="diaForm" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="增加数量(个)" prop="quantity">
<el-input v-model="diaForm.quantity" placeholder="请选择增加数量(个)">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
...
<script>
export default{
name: 'itemCRUDDialog',
props:{
show:{
type:Boolean,
default:false
},
switch:{
type:Boolean,
default:false
},
diaForm: {
type:Object,
default:{}
},
title: {
type:String,
default:''
},
containerType:{
type:Array,
default:[]
}
},
watch:{
show(){
this.visible = this.show
if (!this.switch){
this.diaForm = {}
}
}
},
data() {
return {
visible: this.show
title:''
}
}
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…