element-UI el-table修改input值視圖不更新問題
更新時間：2024年02月29日 09:20:47 作者：代碼の搬運(yùn)工
這篇文章主要介紹了element-UI el-table修改input值視圖不更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題
1.input框通過v-model=“scope.row.molecule”
綁定的值去修改，控制臺打印輸出的是正確修改的值。
但是視圖不跟新
<input class="inputs" type="text"v-model="scope.row.molecule">
2.通過監(jiān)聽@input事件去修改當(dāng)前行里面的數(shù)組數(shù)據(jù)
控制臺打印也是能正確輸出
但視圖還是不更新
<input @input="changeMolecule($event,scope.row)" class="inputs" type="text"
v-model="scope.row.molecule">
changeMolecule(event, row) {
row.molecule=event.target.value
},
3.通過監(jiān)聽@input事件去調(diào)用this.$set()改變數(shù)據(jù)
控制臺打印輸入也是正確輸出
視圖還是不更新
changeMolecule(data, index, row) {
this.topicList.forEach(item=>{
if(item.targetId===row.targetId){
this.$set(item,'molecule',row.molecule)
}
})
},
解決方法
還是通過this.$set()，但是不能直接去修改對象里的某一個值
因?yàn)閑l-table監(jiān)聽的是一整行數(shù)據(jù)，并不是某一個單元格
所以需要重新賦值一整行數(shù)據(jù)
<el-table :data="topicList" border height="60vh" style="width: 100%">
<el-table-column label="指標(biāo)" prop="targetTitle" width="180"></el-table-column>
<el-table-column label="指標(biāo)計算方法" prop="computingMethod"></el-table-column>
<el-table-column label="分子/分母（自動計算）" width="300">
<template scope="scope">
<div class="input-div">
<input @input="changeMolecule(topicList,scope.$index,scope.row)" class="inputs" type="text"
v-model="scope.row.molecule">
<span class="divide">/</span>
<input @input="changeDenominator(topicList,scope.$index,scope.row)" class="inputs" type="text"
v-model="scope.row.denominator">
<span class="divide"
v-if="scope.row.molecule&&!isNaN(Number(scope.row.molecule))&& scope.row.denominator&&!isNaN(Number(scope.row.denominator))">
{{(scope.row.molecule/scope.row.denominator*100).toFixed(2)+'%'}}
</span>
</div>
</template>
</el-table-column>
</el-table>
changeMolecule(data, index, row) {
//兩種都可以
this.$set(data, index, row)
//this.$set(this.topicList,index,row)
},
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
Vuejs學(xué)習(xí)筆記之使用指令v-model完成表單的數(shù)據(jù)雙向綁定
表單類控件承載了一個網(wǎng)頁數(shù)據(jù)的錄入與交互，本章將介紹如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值。感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要介紹了vue多層嵌套路由,結(jié)合實(shí)例形式分析了vue.js多層嵌套路由的概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了解決npm ERR! code 128的錯誤問題,本文給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章通過圖文形式給大家介紹了vue項目的骨架及常用組件的相關(guān)知識，對此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。2017-12-12
這篇文章主要為大家介紹了vue封裝form表單組件拒絕重復(fù)寫form表單的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了搭建vscode+vue環(huán)境的詳細(xì)教程,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
vue.js的靈魂是組件，而組件的靈魂是插槽。借助于插槽，我們能最大程度上實(shí)現(xiàn)組件復(fù)用。本文主要是對插槽的實(shí)現(xiàn)機(jī)制進(jìn)行詳細(xì)概括總結(jié)，在某些場景中，有一定的用處2021-06-06
vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
這篇文章主要為大家詳細(xì)介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08