场景:一条主数据,下多条从数据,可以直接在table中修改 ,不需要弹窗!
html代码
<a-table
:columns="columns"
:data-source="tableData"
:row-selection="rowSelection"
:selectedRowKeys="selectedRowKeys"
style="max-height: 250px;overflow-y: auto;"
:pagination="false"
>
<template slot="value" slot-scope="text,record">
<a-input :ref="'myInput_'+ record.value" v-model:value="record.value" style="width: 130px;" @click="handleEdit(record)" @blur="editParam" @pressEnter="cancelFocus(record)"/>
</template>
<template slot="edit" slot-scope="text,record">
<a-button type="link" size="small" @click="handleRemove(record)">删除<a-icon type="delete" /></a-button>
</template>
</a-table>
相关方法:
//在点击输入框的时候将所选行数据赋值给属性
handleEdit(row) {
this.scriptParamForm = row
},
//回车时动态取消光标
cancelFocus(record){
// this.$refs.myInput.blur();
this.$refs['myInput_' + record.value].blur();
},
//失去焦点调用方法发送请求
editParam() {
var _this = this;
editParam(_this.scriptParamForm).then(res => {
this.$message.success('修改成功')
})
this.dialogVisibleEdit = false
},
效果:
注意:
必须使用动态ref设定,不然多数据回车的时候就会失效,触发不了取消光标的方法,其次就是如果可以编辑多个字段,可以在点击输入框的时候赋值的属性,可以作为跟失去焦点时的数据坐下对比,从而得出被修改的数据然后针对修改的数据发送请求,从而解决高并发导致的问题;
多字段编辑的话,就不要使用回车跟失焦作为发送接口的窗口,可以在第一次点击某条数据的输入框时,将后面的删除按钮隐藏,显示确认/取消按钮,确认发送请求,取消回复原始数据;