需求:
在如下编辑页面的表格中,点击编辑,弹出频段编辑页面。修改完后数据回传并更新表单数据,不要通过后台。
实现步骤:
1. 点击编辑时记录行号
2. 传递当前记录到子页面
3. 子页面通过emit回传修改后的记录
4. 修改后的记录更新到表格
具体代码:
1. 点击编辑(或一行的空白处)记录行号
1) a-table添加 customRow属性,响应点击事件 :customRow="handleRowClick"
2)提供行点击事件
<a-table :columns="columns" :data-source="spTests" :customRow="handleRowClick">
// 点击空白处获取当前行 handleRowClick(record, index) { return { on: { click: () => { this.currRowIndex = index //暂存当前行号 } } } },
3. 子页面修改,emit回传数据
handleSubmit() { const { form: { validateFields } } = this this.confirmLoading = true validateFields((errors, values) => { if (!errors) { for (const key in values) { if (typeof values[key] === 'object' && !(values[key] === null)) { values[key] = JSON.stringify(values[key]) } } this.$emit('ok', values)// 回传数据 this.handleCancel() } this.confirmLoading = false }) },
4. 父页面接收数据并更新数据
<edit-spec-form ref="editSpecForm" @ok="handleEditOK" />
handleEditOK(it) { this.spTests[this.currRowIndex] = it //更新数据到当前行 },
标签:antdv,Vue2,修改,点击,values,key,回传,table,页面 From: https://www.cnblogs.com/ccjungle/p/16914774.html