IView组件中,Table指定行列样式--学习笔记

在使用IView这套漂亮的UI组件时,会遇到需要指定某行或者某列或者某单元格的样式的方法:[官方文档]https://www.iviewui.com/components/table
几个注意点:

  1. 在Table组件调用时prop指定 :rowClassName="rowClassName"
    是一个函数名,在methods方法中要去实现这个回调函数
rowClassName(row,index){
                if(index===1){
                    return 'demo-table-info-row';
                }
                return '';
            }
  1. 这个回调函数返回一个class样式名:demo-row-red,在调用这个Table组件的父组件中的样式要如下:
    .ivu-table .demo-table-info-row td{
        background-color: pink;
    }

千万注意前面加上.ivu-table 以及后面加上td。为啥?我也不知道(我不太懂CSS,猜想这个加上是为了最后CSS整合的时候能定位到.....希望有大神能懂得给个科学的解释......)

  1. 引申:比如说,我做了个vue组件叫myTable.vue,简单的说这个myTable.vue组件是封装并扩展了IView的Table组件。那么,我的业务系统要调用我自己的这个myTable组件的时候,才想起来要去指定特定行样式,怎么办?
    去修改myTable.vue?在myTable.vue增加样式函数?肯定不行,因为我这个业务模块要这样定义行样式,要是要换个业务模块也调用这个mytable.vue,要用不同的行样式怎么办?
    所以,当前的做法是:把myTable组件的props中把rowClassName抛出来,去给调用组件去实现啦。注意的是:这个是函数,需要指定下类型。
//myTable.vue的script段中:
        props:{
            rowClassName:{
                type:Function,
                default(){
                    return ''
                }
            },
//myTable.vue的 template段中:
<Table :row-class-name="rowClassName" 
      :columns="bizColumns" :data="bizData"></Table> 

在业务模块调用时

//业务模块中:
<myTable :columns="tableCols" :data="tableData" 
      :rowClassName="mydefineRow"></myTable>
//然后在业务模块去实现这个回调函数:
methods:{
     mydefineRow(row,index){
                if(index===1){
                    return 'demo-row-red';
                }
                return '';
            }
}
//省略掉的内容:在业务模块中去实现.demo-row-red这个css,再强调下别忘了前面的.ivu-table  以及后面加上td

推荐阅读更多精彩内容