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