需求:VUE监听表单的指定字段有内容修改时提交执行相应操作;字段内容无修改提交时不执行操作
<el-dialog title="实体属性" :visible.sync="entityAttr" width="35%">
<el-form ref="formAttr" :model="formAttr" label-width="80px" label-position="left" size="mini">
<el-form-item label="所属阵营" prop="value" >
<el-select v-model="value" placeholder="请选择所属阵营" @change="handlerChange($event)">
<el-option
v-for="(obj,key) in entityData"
:key="key"
:value="obj.id"
:label="obj.classification"
>{{obj.classification}}</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="saveEdit">保 存</el-button>
</div>
</el-dialog>
data(){
return{
entityAttr:false,
formAttr:{},
entityData: [
{
id: "1",
classification: '红方',
}, {
id: "2",
classification: '蓝方',
}, {
id: "3",
classification: '白方',
}
],
saveFlag:false,
}
},
methods:{
//修改实体属性
editAttr(){
this.saveFlag=false;
},
// 修改所属阵营
handlerChange(e) {
this.saveFlag=true;
},
// 保存修改实体属性
saveEdit(){
if(this.saveFlag){
// 删除原所属阵营实体信息;
this.deleteEidt( this.formAttr.id,"所属阵营");
// 添加实体至目标阵营
this.entityData.forEach((ele) => {
if(ele.id==i.value){
console.log(ele,ele.id,"锁定新位置")
if(ele.children){
ele.children.push(this.formAttr)
}else{
Vue.set(ele,"children",[this.formAttr]);
}
}
});
}
this.entityAttr=false;
},
}