Muse-UI表格行樣式的自定義

Muse-UI是基於Vue架構的一個前端組件,類似於Element-UI。個人使用後感覺二者 的界面風格 都趨向於“簡潔”、“秀氣”,並且容易上手。

就官網文檔而言,Element-UI更詳細且可讀性強(畢竟是國內出的一個組件庫,你懂的),Muse-UI只列出了基本的案例及屬性,有前端經驗的開發去讀會很快,新手可能就有點摸不着頭腦了。但鑑於它的使用簡單性大於它的文檔不可讀性,選擇Muse-UI也未嘗不是一個打造高大上界面的稱手工具。

今天談的重點——Muse-UI的表格行樣式的自定義

這個表格組件使用起來,嗯,很方便。列名定義好,數據往裏一丟,完全方便的不要不要的啊。但是問題來了,我要對這個表格進行一個最基本的操作,希望選中其中一行,能夠高亮該行。找了一下文檔給出的例子:木有任何關於這個功能的示例,甚至點擊事件的示例也不給一個。好吧,我去百度找一下。結果就是由於國內使用Muse-UI的人實在是太少,完全找不到我要的。

那沒辦法了,我把表格這一頁文檔仔仔細細看了一遍,找到了這個:
在這裏插入圖片描述
既然有定義好的接口就好辦了,一般這種類型的方法,可以在方法內部判斷該行的某些屬性來決定該行的樣式,也可以爲所有行定義統一的樣式(別問我爲啥知道,經驗告訴我的)。我寫的這個方法是這個樣子的:

     //html
     <mu-data-table :columns="pointWarn.columns" :data="pointWarn.list" :rowStyle="setStyle" >
        <template slot-scope="scope">
           <td>{{scope.$index+1}}</td>
           <td>{{scope.row.violationsType}}</td>
           <td>{{scope.row.createTime}}</td>
        </template>
     </mu-data-table>
     //js
     setStyle(rowIndex,row){
        if(row.id === this.currentRow.id){
          return 'background-color:#ddd'
        }else{
          return 'background-color:#abc'
        }
      }

這樣就可以了,是不是真的很簡單???!!!

參考文章:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章