柳州网站建设柳州/制作一个网站大概需要多少钱

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

几个注意点：

在Table组件调用时prop指定 :rowClassName="rowClassName"

是一个函数名，在methods方法中要去实现这个回调函数

rowClassName(row,index){

if(index===1){

return 'demo-table-info-row';

}

return '';

}

这个回调函数返回一个class样式名：demo-row-red，在调用这个Table组件的父组件中的样式要如下：

.ivu-table .demo-table-info-row td{

background-color: pink;

}

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

引申：比如说，我做了个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段中：

:columns="bizColumns" :data="bizData">

在业务模块调用时

//业务模块中：

:rowClassName="mydefineRow">

//然后在业务模块去实现这个回调函数：

methods:{

mydefineRow(row,index){

if(index===1){

return 'demo-row-red';

}

return '';

}

}

//省略掉的内容：在业务模块中去实现.demo-row-red这个css，再强调下别忘了前面的.ivu-table 以及后面加上td