Vue知识分享04-修改时Switch开关回显

Vue知识分享04-修改时Switch开关回显

场景

在javaweb写增删查改的时候，前端会用到vue框架，其中修改操作会用到dialog对话框

问题

在回显的时候，状态使用的是Switch开关，在回显数据的时候发现其他都回显成功了，但是状态一直是关

可行方法

只需要在状态标签中把active-value和inactive-value两个数据改为双向绑定，前面加冒号即可

<el-form-item label="状态">
    <el-switch v-model="brand.status"
               :active-value="1"
               :inactive-value="0"
    ></el-switch>
</el-form-item>

项目brand-case存在的问题

增加修改查询共用一个品牌模型数据，点击修改数据后在添加数据的对话框中还存在修改的数据，搜索栏也存在修改的数据。

项目brand-case已解决的问题

1.在js中强行修改element组件的标签属性会导致idea在顶部添加一条import代码，导致页面全部显示不出来

2.在点击动态表单某行修改按钮后，弹出编辑dialog对话框，dialog中数据改变，该行数据也随之改变的现象

初始代码

openDialog(row){
	this.brand = row;//brand是数据对象模型
	this.dialogVisible = true;//控制dialog是否打开
},

因为row是Object对象类型，如果直接赋值，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝，利用JSON就可以了，如下

修改后

openDialog(row){
	this.brand = JSON.parse(JSON.stringify(row));
	this.dialogVisible = true;
},