Vue如何動態(tài)修改el-table的某列數(shù)據(jù)
更新時間：2022年04月23日 16:52:38 作者：guohongyanghy
這篇文章主要介紹了Vue如何動態(tài)修改el-table的某列數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(tài)修改el-table的某列數(shù)據(jù)
1.對話框打開時調(diào)用函數(shù)open@opened="checked"
2.可編輯
<el-table-column ??? -------- visEdit="true" ??????>
3.同步選中的數(shù)據(jù)List：multipleSelection ，函數(shù) checked: function ()
設(shè)置el-table某一列點擊出現(xiàn)輸入框可以編輯
設(shè)置el-table 某一列點擊出現(xiàn)輸入框可以編輯，鼠標(biāo)失去輸入框焦點時輸入框消失，顯示對應(yīng)的值。
如下圖所示：
具體實現(xiàn)：
<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" style="width: 100%" size="mini" @cell-click="tabClick">
<el-table-column label="順序" prop="adSort">
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '順序'">
<el-input v-model="scope.row.adSort" type="number" maxlength="20" placeholder="請輸入順序" size="mini" @blur="inputBlur(scope.row)" />
</span>
<span v-else>{{ scope.row.adSort }}</span>
</template>
</el-table-column>
</el-table>
通過 tableRowClassName 設(shè)置每一行的index：
tableRowClassName ({ row, rowIndex }) {
// 把每一行的索引放進(jìn)row
row.index = rowIndex
}
行點擊事件，當(dāng)某一行被點擊時，該行的某列設(shè)置 tabClickIndex：
由于
v-if="scope.row.index === tabClickIndex && tabClickLabel === '順序'"
所以當(dāng)前點擊行的某列會出現(xiàn)輸入框：
// tabClick row 當(dāng)前行 column 當(dāng)前列
tabClick (row, column, cell, event) {
switch (column.label) {
case '順序':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
default: return
}
console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)
}
鼠標(biāo)失焦事件：
// 失去焦點初始化
inputBlur (row) {
// console.log('row', row)
this.tabClickIndex = null
this.tabClickLabel = ''
}
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue如何設(shè)置el-table背景透明樣式
- vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
- VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實現(xiàn)方法
- vue實現(xiàn)動態(tài)控制el-table表格列的展示與隱藏
- vue+element獲取el-table某行的下標(biāo),根據(jù)下標(biāo)操作數(shù)組對象方式
- vue el-table實現(xiàn)自定義表頭
- Vue+element使用row-class-name修改el-table某一行解決背景色無效的方法
相關(guān)文章
這篇文章主要介紹了用vscode開發(fā)vue應(yīng)用的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vue實現(xiàn)接口進(jìn)度條功能，在請求數(shù)據(jù)的過程中，需要添加監(jiān)聽函數(shù)來監(jiān)測數(shù)據(jù)請求的過程變化，并更新組件相應(yīng)的屬性和界面元素,本文結(jié)合實例代碼詳細(xì)講解，需要的朋友可以參考下2023-04-04
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)中英文切換的詳細(xì)步驟,項目中經(jīng)常有中英文切換的功能,接下來就簡單實現(xiàn)以下這個功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實現(xiàn)菜單欄無限多層級分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
如今Vue3的勢頭正盛，在diff算法方面也做了相應(yīng)的變化，利用到了最長遞增子序列把性能又提升了一個檔次。本文就來帶大家簡單解刨一下Vue3中的diff算法2023-02-02
ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實例，可以使用組件的所有方法，?在使用方法的時候直接this.$refs.（ref值）.方法（） 就可以使用了，這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue和React的區(qū)別，畢竟是兩個框架，不像兩個?API，要說細(xì)節(jié)上的區(qū)別就太多太多了，本文就簡單的帶大家說說Vue?和?React?的區(qū)別,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
本篇文章主要介紹了VUE 全局變量的幾種實現(xiàn)方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06