element-ui中如何给el-table的某一行或某一列加样式
1.查阅element-ui官方文档后我们发现有如下属性 :cell-class-name:
2.为表格el-table添加该属性,并指定函数名: :cell-class-name=“addClass”
通过addClass方法为指定行或列添加类名
3.在methods中定义addClass方法,给需要更改样式的行或列添加类名:
addClass({row,column,rowIndex,columnIndex}){ if(rowIndex >=this.tableData.length-3){ //此判断为最后三行 return 'addBorder' } if(columnIndex==0 || columnIndex==1){ //此判断为前两列 return 'addBorder' } }
4.在中设置指定css样式:
.addBorder{ border-right: solid 1px #065B5B !important; border-left: solid 1px #065B5B !important; }
注:此样式必须是全局样式才会起作用,所以
到此这篇关于element-ui中怎么给el-table的某一行或某一列加样式的文章就介绍到这了,更多相关element-ui中怎么给el-table的某一行或某一列加样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
详解Vue实战指南之依赖注入(provide/inject)
这篇文章主要介绍了详解Vue实战指南之依赖注入(provide/inject),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析,html标签显示为字符串的问题,文中通过图文介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。2016-12-12Ant Design of Vue select框获取key和name的问题
这篇文章主要介绍了Ant Design of Vue select框获取key和name的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-06-06vue实例配置对象中el、template、render的用法
这篇文章主要介绍了vue实例配置对象中el、template、render的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论