1.表格渲染
<el-table-column align="center" prop="sysOrderId" label="订单编号" min-width="220" show-overflow-tooltip>
<template slot-scope="scope">
<div v-if="!scope.row.sysOrderId">
<el-input :id="'sysOrderInput_' + scope.$index" v-model='orderId' style='width: 90%' v-if="scope.row.orderFlag" @blur="updateOrderId(scope.row, scope.$index)"></el-input>
<el-button type="text" class="el-icon-edit-outline" @click="handleOrderEdit(scope.row, scope.$index)"></el-button>
</div>
<span v-else>{{scope.row.sysOrderId}}</span>
</template>
</el-table-column>
2.方法
orderId ---中转参数,也可以绑定scope值,但一次只修改一行,重新定义也无妨
handleOrderEdit(item, index) {
item.orderFlag = true
this.$nextTick(() => {
document.getElementById(`sysOrderInput_${index}`).focus()
})
},
updateOrderId(item) {
this.$service.axios({
sysRefundId: item.sysRefundId,
orderId: this.orderId
}).then(res => {
if (res.errorCode === '0') {
this.$message.success('操作成功')
this.getList()
}
}).catch(() => {
this.orderId = ''
this.getList(this.pageNum)----请求
})
3,input聚焦需对应表格中元素!!!