vue.js elementUI中的 el-talbe 内嵌el-input el-select无法编辑,视图不刷新(更新)
在开发中遇到一个关于element UI中el-table里的数据内嵌el-input 和el-select后无法编辑修改内容,视图无法刷新的问题。(实际上内容是更改了的)
引用:https://linzhji.blog.csdn.net/article/details/105333731
<Qtable
:tableData="tableListA"
:tableHead="tableHeadA"
:toolBar="toolBarA"
:loading="loading"
index
fixedSort="left"
:footer="footers"
@handler="handler"
:border="tableBorder"
:headerAlign="headerAlign"
>
<template slot="slot" slot-scope="scope">
<div v-if="scope.data.prop === 'voteNum'" style="width: 100%">
<el-input
@input="inputChange(scope.data.row.index)"
@blur="inputChange(scope.data.row.index)"
@change="validateVote"
style="width: 100%"
v-model="scope.data.row.voteNum"
placeholder="请输入得票数"
type="text"
></el-input>
</div>
<div v-if="scope.data.prop === 'isElected'">
<el-select
@input="inputChange(scope.data.row.index)"
@blur="inputChange(scope.data.row.index)"
style="width: 100%"
v-model="scope.data.row.isElected"
placeholder="请选择"
>
<el-option label="是" :value="1"></el-option>
<el-option label="否" :value="2"></el-option>
</el-select>
</div>
</template>
</Qtable>
//Qtable是我基于el-table封装的table组件
经过百度和多次尝试,发现使用输入框的input事件来监听可以解决这个问题@input=“change(scope.$index)”
vue.js
// 解决element UI输入框输入不显示的情况
inputChange(idx) {
console.log("idx", idx);
// 委员选举结果
let tmpObj = this.tableList[idx];
this.$set(this.tableList, idx, tmpObj);
//使用vue自带的$set方法传入三个参数(需要更新的对象,key,value)进行手动更新数据.更新该行数据 },
问题总算是解决了,但我又发现另一种解决办法,如果使用原生的html标签(input,select)替代el-input和el-select,那么这个问题也可以得到解决,也就不用监听input事件进行强制刷新了!至于为什么会这样还在研究中,欢迎有志之士一起探讨!