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'
        }
      }

这样就可以了,是不是真的很简单???!!!

参考文章:

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