Vue(element ui)中操作row參數(shù)的使用方式
更新時間：2025年04月02日 11:01:11 作者：Xwzzz_
這篇文章主要介紹了Vue(element ui)中操作row參數(shù)的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue(element ui)中操作row參數(shù)使用
在使用element ui或Vue中當(dāng)我們要對表格中的數(shù)據(jù)按行進(jìn)行特殊操作或標(biāo)記時，通常通過在vue中methods方法中操作row參數(shù)來訪問該行的索引或是單元格中的數(shù)據(jù)進(jìn)行對應(yīng)操作。
樣式表格中
<el-table :data="tableData" :row-class-name="tableRowClassName">
<el-table-column prop="USER_CODE" label="工號" 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="部門號" 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 '';
}通過row.rowIndex===?可以訪問當(dāng)前行的索引，就可以通過指定 Table 組件的row-class-name屬性來為 Table 中的某一行添加 class，表明該行處于某種狀態(tài)。
與此同時我們也可以通過row來訪問該行的每一個單元格數(shù)據(jù)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vant(ZanUi)結(jié)合async-validator實現(xiàn)表單驗證的方法
這篇文章主要介紹了vant(ZanUi)結(jié)合async-validator實現(xiàn)表單驗證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue 開發(fā)企業(yè)微信整合,結(jié)合具體案例形式分析了vue.js使用企業(yè)微信JSSDK實現(xiàn)手機(jī)端程序可以和企業(yè)微信進(jìn)行整合功能的相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
vue Element左側(cè)無限級菜單實現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無限級菜單實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue3鼠標(biāo)拖拽滑動效果實現(xiàn)demo
這篇文章主要為大家介紹了vue3鼠標(biāo)拖拽滑動效果實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題
這篇文章主要介紹了解決el-upload批量上傳只執(zhí)行一次成功回調(diào)on-success的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文主要介紹了iview 權(quán)限管理，iview-admin2.0自帶權(quán)限管理?？梢酝ㄟ^設(shè)置路由的meta對象的參數(shù)access來分配權(quán)限。感興趣的可以了解一下2021-07-07
基于element-ui對話框el-dialog初始化的校驗問題解決
這篇文章主要介紹了基于element-ui對話框el-dialog初始化的校驗問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
element組件el-date-picker禁用當(dāng)前時分秒之前的日期時間選擇
本文主要介紹了element組件el-date-picker禁用當(dāng)前時分秒之前的日期時間選擇，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Vue數(shù)據(jù)驅(qū)動試圖的實現(xiàn)方法及原理
當(dāng)Vue實例中的數(shù)據(jù)（data）發(fā)生變化時,與之相關(guān)聯(lián)的視圖（template）會自動更新,反映出最新的數(shù)據(jù)狀態(tài), Vue的數(shù)據(jù)驅(qū)動視圖是通過其響應(yīng)式系統(tǒng)實現(xiàn)的,以下是Vue數(shù)據(jù)驅(qū)動視圖實現(xiàn)的核心原理,需要的朋友可以參考下2024-10-10
淺談Vuex@2.3.0 中的 state 支持函數(shù)申明
這篇文章主要介紹了淺談Vuex@2.3.0 中的 state 支持函數(shù)申明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11