el-table-column中定义了如下代码,
<el-table-column label="支付编码" align="center" prop="payCode" :show-overflow-tooltip="true" />
<el-table-column label="支付方式" align="center" prop="payType" :show-overflow-tooltip="true" />
然后定义了一个弹窗,用来新增、修改记录,prop的命名跟表格的prop命名一样
<el-dialog :title="title" :visible.sync="open" width="500px">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="支付编码" prop="payCode">
<el-input v-model="form.payCode" placeholder="请输入" />
</el-form-item>
<el-form-item label="支付方式" prop="payType">
<el-input v-model="form.payType" placeholder="请输入" />
</el-form-item>
<el-form-item label="是否启用" prop="ifUse">
<el-radio v-model="form.ifUse" label="1">启用</el-radio>
<el-radio v-model="form.ifUse" label="0">关闭</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
界面如图
点第一条的修改,弹窗,然后点取消
再点第二条的修改,然后点取消
这时神奇的事情发生了
第二条的记录也变成第一条的数据了,为啥form的prop会赋值到table里的prop去呢?
如果修改el-form-item的prop的命名跟表格的prop命名不一样的话就不会出现这个问题
一直以为是el-table的问题,后来查询了一下,原来是因为vue的双向绑定问题,
最终解决方案如下:
handleUpdate(row) {
this.reset();
this.form = JSON.parse(JSON.stringify(row));
this.open = true;
this.title = "修改支付方式";
}
或者修改代码,改成这样赋值,不会出现这个问题
handleUpdate(row) {
this.reset();
this.form.id = row.id;
this.form.payCode = row.payCode;
this.form.payType = row.payType;
this.form.ifUse = row.ifUse;
this.open = true;
this.title = "修改支付方式";
}