Vue(element ui)中操作row參數(shù)的使用方式
更新時(shí)間：2025年04月02日 11:01:11 作者：Xwzzz_
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue(element ui)中操作row參數(shù)使用
在使用element ui或Vue中當(dāng)我們要對(duì)表格中的數(shù)據(jù)按行進(jìn)行特殊操作或標(biāo)記時(shí)，通常通過(guò)在vue中methods方法中操作row參數(shù)來(lái)訪問(wèn)該行的索引或是單元格中的數(shù)據(jù)進(jìn)行對(duì)應(yīng)操作。
樣式表格中
<el-table :data="tableData" :row-class-name="tableRowClassName">
<el-table-column prop="USER_CODE" label="工號(hào)" width="100">
</el-table-column>
<el-table-column prop="USER_NAME" label="姓名" width="100">
</el-table-column>
<el-table-column prop="USER_DEPARTMENT" label="部門">
</el-table-column>
<el-table-column prop="USER_DEPARTMENT_CODE" label="部門號(hào)" width="100">
</el-table-column>
<el-table-column prop="IP_ADDRESS" label="地址" width="100">
</el-table-column>
<el-table-column prop="LOGIN_TIME" label="ip地址">
</el-table-column>
</el-table>Vue中
methods: {
tableRowClassName: function (row) {
console.log(row)
if (row.rowIndex === 1) {
return 'warning-row';
} else if (row.rowIndex === 3) {
return 'success-row';
}
return '';
}通過(guò)row.rowIndex===?可以訪問(wèn)當(dāng)前行的索引，就可以通過(guò)指定 Table 組件的row-class-name屬性來(lái)為 Table 中的某一行添加 class，表明該行處于某種狀態(tài)。
與此同時(shí)我們也可以通過(guò)row來(lái)訪問(wèn)該行的每一個(gè)單元格數(shù)據(jù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue項(xiàng)目中使用snapshot測(cè)試的具體使用
這篇文章主要介紹了在Vue項(xiàng)目中使用snapshot測(cè)試的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue和element上傳圖片以及進(jìn)行拖拽圖片排序問(wèn)題
這篇文章主要介紹了vue和element上傳圖片以及進(jìn)行拖拽圖片排序問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue項(xiàng)目啟動(dòng)提示Cannot GET /問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目啟動(dòng)提示Cannot GET /問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue中addEventListener()?監(jiān)聽(tīng)事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽(tīng)事件案例講解，包括語(yǔ)法講解和事件冒泡或事件捕獲的相關(guān)知識(shí)，本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12
本文主要介紹了vue3.x頁(yè)面功能拆分方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
下面小編就為大家分享一篇vue中動(dòng)態(tài)綁定表單元素的屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
最近在項(xiàng)目中自己封裝的一個(gè)記錄一下,下面這篇文章主要給大家介紹了關(guān)于利用Vue3封裝一個(gè)彈框組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來(lái)通過(guò)本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03