目标:input框里默认显示后端查询值,并可直接修改,失焦时更新
首先使用value绑定数据,可以显示不可修改;然后改为v-model绑定
<el-table-column fixed="right" label="全局参数" min-width="150">
<template slot-scope="scope">
<el-input v-model="scene[scope.$index].global" type="textarea" @change="updateGlobal(value)" />
</template>
</el-table-column>
此时无法获取输入值:
之后输出this.global,发现输入值之后this.global并没有改变,依然是null
补充:思路错了,这个地方v-model绑定的是scene[scope.$index].global而不是后续声明的this.global所以获取不到。
获取方法
- 1使用ref获取
用ref可以获取到input里的值
写法为this.$refs.param.value
- v-model双向绑定获取
因为用v-model="scene[scope.$index].global"
进行了绑定,所以this.scene[0].global
即可获取
- 表格scope.row
调用方法时传入scope.row参数,用row.global
即可获取
本例中,update的主键可以通过url取到,也可以用row取到
传参到后台执行update即可