【前端学习日记】element-UI表格列嵌套输入框无法输入的情况
啊啊啊,各位学习vue中的孩子们,你们一定会遇到的,就是表格里面嵌套表单元素,比如文本框或者数字框,然后你会发现,样式是没问题的,但是输入文本的时候,却不显示,仿佛被强制删除了。然后我看了自己的代码,发现表格的单元格实际上已经绑定了prop属性,通过prop的属性值我们可以在data中为其赋值,但当我们在内部再添加一个表单元素,表单元素的绑定又是一个属性值,虽然我们输入以后确实表单数据改变了,但是
·
啊啊啊,各位学习vue中的孩子们,你们一定会遇到的,就是表格里面嵌套表单元素,比如文本框或者数字框,然后你会发现,样式是没问题的,但是输入文本的时候,却不显示,仿佛被强制删除了。然后你点一下其他地方(让页面有所变动但不发生跳转 ,刷新),你会发现输入的文本出现了,貌似是一种视图未刷新的原因。
经过查阅许多大神的类似问题解决方案, 事件啥的,不起作用。最后在一篇文库中看到原因。
https://wenku.baidu.com/view/75ca93dacbd376eeaeaad1f34693daef5ff71377.html
然后我看了自己的代码,发现表格的单元格实际上已经绑定了prop属性,通过prop的属性值我们可以在data中为其赋值,但当我们在内部再添加一个表单元素,表单元素的绑定又是一个属性值,虽然我们输入以后确实表单数据改变了,但是表格的数据却没有显示,中间仿佛差了一环。
所以我们将表格的属性和表单的属性绑定起来,这样当我们输入时,表单元素和表格同时捕获到了数据的变化,就能正常显示啦。
<el-table-column prop="suggestion" label="意见">
<template slot-scope="scope">
<el-input v-model="scope.row.suggestion" type="textarea" size="mini" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
tableData: [{
suggestion:'1111wwowowo'
},
更多推荐
所有评论(0)