广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >element-ui中如何给el-table的某一行或某一列加样式
  • 527
分享到

element-ui中如何给el-table的某一行或某一列加样式

el-table某一行加样式el-table某一列加样式 2023-01-03 12:01:49 527人浏览 八月长安
摘要

目录1.查阅element-ui官方文档后我们发现有如下属性 :cell-class-name: 2.为表格el-table添加该属性,并指定函数名: :cell-class-na

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的某一行或某一列加样式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: element-ui中如何给el-table的某一行或某一列加样式

本文链接: https://www.lsjlt.com/news/176455.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作