vue+elementUI中表格高亮或字體顏色改變操作

更新時(shí)間：2020年11月02日 16:19:11 作者：༺༂鑫༒海༂༻

這篇文章主要介紹了vue+elementUI中表格高亮或字體顏色改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

重點(diǎn)的代碼：

:row-style="setRowStyle"這個(gè)屬性就是在table標(biāo)簽綁定的

:row-style="setRowStyle"

// 這個(gè)方法直接加到methods里就好了，頁(yè)面會(huì)自動(dòng)調(diào)用的
setRowStyle(row) {
   if (row.row.isPart == true) {
    return 'color:blue;'
   }
  },

具體代碼：

hmtl

<el-table width="100%" :data="gridData" border fit highlight-current-row :header-cell-style="{background:'#199ED8'}" :row-style="setRowStyle">
 <el-table-column label="序號(hào)" type="index"></el-table-column>
 </el-table>

js中就是方法的調(diào)用就好了

setRowStyle(row) {
   if (row.row.isPart == true) {
    return 'color:blue;'
   }
  },

補(bǔ)充知識(shí)：vue+element-ui 表單的 el-input 第二次修改時(shí)無(wú)法輸入

由于新增跟修改用的是同一個(gè)彈窗，所以當(dāng)修改提交時(shí)，要清空 input 框內(nèi)的值。

提交時(shí)不能只把父對(duì)象formData 設(shè)置為空對(duì)象。即this.formData = {} 是錯(cuò)誤的

正確的寫(xiě)法為

this.formData = {name: '' }

原因：如果把this.formData設(shè)置為空，this.formData.name 就是 undefined，此時(shí)就會(huì)賦值不上。

   <el-form ref="popupContent" :model="formData" :rules="popupContentRules">
    <el-row>
     <el-form-item label="姓名" label-width="80px" prop="name">
      <el-input name="name" @keyup.native="judge" v-model="formData.name"/>
     </el-form-item>
    </el-row>
   </el-form>

以上這篇vue+elementUI中表格高亮或字體顏色改變操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
基于Vue3自定義實(shí)現(xiàn)圖片翻轉(zhuǎn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3自定義實(shí)現(xiàn)簡(jiǎn)單的圖片翻轉(zhuǎn)預(yù)覽功能,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,有需要的小伙伴可以參考一下
2023-10-10
vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程
這篇文章主要給大家介紹了關(guān)于vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
詳解Vue 路由組件傳參的 8 種方式
這篇文章主要介紹了Vue 路由組件傳參的 8 種方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
VUE 全局變量的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue3無(wú)config文件夾打包后頁(yè)面空白問(wèn)題及解決
這篇文章主要介紹了vue3無(wú)config文件夾打包后頁(yè)面空白問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue的兼容性解決方案Babel-polyfill案例解析
這篇文章主要介紹了Vue的兼容性解決方案Babel-polyfill的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
vue3.0實(shí)踐之寫(xiě)tsx語(yǔ)法實(shí)例
很久不寫(xiě)博客了,最近在使用ts和tsx開(kāi)發(fā)vue類(lèi)項(xiàng)目,網(wǎng)上資料比較少,順便記錄一下方便同樣開(kāi)發(fā)的人互相學(xué)習(xí)共同進(jìn)步,下面這篇文章主要給大家介紹了關(guān)于vue3.0實(shí)踐之寫(xiě)tsx語(yǔ)法的相關(guān)資料,需要的朋友可以參考下
2022-07-07
vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能實(shí)例代碼
我們平時(shí)經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04