您好,登錄后才能下訂單哦!
這篇文章主要介紹了Element Table中row-class-name無效怎么辦,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
Element UI 的Table組件踩坑記:
(1)參數(shù)row-class-name無效的坑:官方文檔給出了如下代碼:
但是我使用后并沒有出現(xiàn)預(yù)初想要第一行高亮的效果,然后console.log(row, rowIndex),發(fā)現(xiàn)控制臺輸出的值均為undefined。最終解決方案是只要傳入row或者rowIndex即可,然后根據(jù)自己所要的數(shù)據(jù)而進(jìn)行處理,后來我修改代碼為如下:
tableRowClassName(row) { if (row.number === 1 && this.isActive) { return 'first-row' } else { return '' } }
即可創(chuàng)建實(shí)例時已經(jīng)渲染了第一行數(shù)據(jù),其中number是我已經(jīng)定義的第幾行(根據(jù)自己獲取數(shù)據(jù)結(jié)構(gòu)自行使用)isActive是我等下要控制實(shí)現(xiàn)點(diǎn)擊所在行而定義的參數(shù),效果圖如下:
(二)參數(shù)highlight-current-row的使用:
<template> <el-table :data="imageList" :row-class-name="tableRowClassName" :highlight-current-row="true" row-key="getNumber" @row-click="checkImage" > <el-table-column prop="number" label="搜索結(jié)果(按準(zhǔn)確度排序)" ></el-table-column> <el-table-column prop="distance" label="誤差值" ></el-table-column> </el-table> </template> <script> export default { methods: { checkImage(row, event, column) { this.src = row.img this.isActive = false }, tableRowClassName(row) { if (row.number === 1 && this.isActive) { return 'first-row' } else { return '' } } }, } </script> //下面通過修改原插件的樣式來顯示點(diǎn)擊的當(dāng)前行,注意由于是原插件全局的,所以style不能使用scope屬性 <style> .current-row > td { background: #218af3 !important; } </style>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Element Table中row-class-name無效怎么辦”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。