<el-table height="600" width="100%" :header-cell-style="{ background: '#FAFAFA',color: '#8C8C8C' }" show-overflow :loading="loading" :data="tableData" class="first-table"> <el-table-column prop="name" label="档案项"></el-table-column> <el-table-column prop="value_item" label="值类型"></el-table-column> <el-table-column label="操作" width="300" align="center" fixed="right"> <template #default="{ row }"> <el-button @click="handleAction('edit', row)" type="text">编辑</el-button> <el-button @click="handleAction('del', row)" type="text">删除</el-button> </template> </el-table-column> </el-table>
这个是表格数据
<el-dialog :visible.sync="editVisible" :title="isEdit ? '编辑档案项' : '新建档案项'"> <div class="edit-dialog"> <el-form :model="formData" :rules="rules" ref="formData" :label-width="formLabelWidth"> <el-form-item label="名称：" > <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="值类型：" > <el-select v-model="formData.value" placeholder="请选择值类型" :disabled="isEdit"> <el-option v-for="(item, index) in valueList" :key="index" :value="item"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleAction('cancel')">取 消</el-button> <el-button type="primary" @click="handleSave('formData')">保存</el-button> </div> </div> </el-dialog>
这个是弹窗
// this.formData = data
用上面这句话会实现弹窗里的name值改变，表格里的数据直接跟着变化；
js赋值
原理是：这个data 是个数组或者对象，引用型变量， 从而导致双向绑定。
换句话说，当你改变 this.formData 中的数据时，data 中对应的数据也会随之改变，反之亦然。因为它们实际上指向相同的内存地址。
避免双向绑定（用浅拷贝）
如果你希望避免这种双向绑定的行为，可以使用一些方法来创建 formData 的副本，而不是直接将其赋值给 data。例如，可以使用 Object.assign() 方法或 ES6 的展开运算符 ... 来创建 formData 的副本，而不影响原始的 data 数据
this.formData = Object.assign({}, data); // 使用展开运算符创建副本
this.formData = { ...data };
这个是弹窗里面变化，表格内数据不变化，等点击保存在刷新列表改变数据；
