element ui修改el-table表格单元格边框颜色

这篇具有很好参考价值的文章主要介绍了element ui修改el-table表格单元格边框颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element-ui官网

第一步:设置除表头单元格边框样式 :cell-style=“{borderColor:‘#01e3ed’}”
第二步:设置表头单元格边框样式 :header-cell-style=“{borderColor:#01e3ed}”

    <el-table v-loading="loading" :data="userList" :cell-style="{borderColor:'#01e3ed'}" :header-cell-style="{borderColor:'#01e3ed'}">
      tooltip="true" />
     
    </el-table>


第三步:单独给表格加样式 加个类名class=“exporttable”

<el-table v-loading="loading" class="exporttable" :data="userList" :cell-style="{borderColor:'#01e3ed'}" :header-cell-style="{borderColor:'#01e3ed'}">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="用户编号" align="center" prop="userId" />
      <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
     
   </el-table>
    
 
.exporttable {
    border: solid 1px #c0c0c0;
 }


第四步:功能实现 -点赞 + 收藏!你是最美的!文章来源地址https://www.toymoban.com/news/detail-624563.html

到了这里,关于element ui修改el-table表格单元格边框颜色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI <el-table>去除外边框

     使用 Element UI el-table 時,总会自带外边框,写了好多css样式始终不能去除,最终发现是th与td所带的样式。 代码如下

    2024年02月09日
    浏览(44)
  • Element UI 表格 el-table 二次封装

    Tips: 文章末尾有完整封装代码 一、继承 element 表格属性 需要将element提供的表格属性使用props传入组件中 二、配置 element 表格的表头 使用 props 传入的表头数据遍历得到表格的表头。 有些列的数据需要自定义内容,例如:操作列、不同样式的数据展示等。 方式一 需要自定义

    2023年04月08日
    浏览(47)
  • Element ui el-table 合并单元格

      el-table v-loading=\\\"loading\\\" :data=\\\"tableData\\\" style=\\\"width: 100%\\\" highlight-current-row :span-method=\\\"arraySpanMethod\\\"         el-table-column type=\\\"index\\\" label=\\\"序号\\\" /         el-table-column v-for=\\\"item in formThead\\\" :key=\\\"item.label\\\" :label=\\\"item.label\\\" :prop=\\\"item.prop\\\" :formatter=\\\"item.formatter\\\" :width=\\\"item.width || \\\'auto\\\'\\\" /        

    2024年02月02日
    浏览(37)
  • 【Vue/element】 el-table实现表格动态新增/插入/删除 表格行,可编辑单元格

    效果如下: 点击“新增一行”可以在表格最后新增一行,单元格内容可编辑 点击绿色+按钮,可在指定行的后面插入一行 点击红色-按钮,可以删除指定行 原理:表格 el-table 是通过动态循环 tableData 生成,只要对 tableData 数组进行增加删除元素,就可以达到效果 这里用了ele

    2024年02月16日
    浏览(63)
  • element-ui的el-table自带横线的去除 和 iview的table边框线去除

    记录一下这次遇到的问题,要求是去掉el-table所有的内外边框线 elementui的边框线去除 iviewui的table边框线去除

    2024年02月11日
    浏览(52)
  • element ui - el-table给单元格添加点击事件

    el-table中,点击版本号触发查看配置功能,但是产品想将热区扩大,从点击版本号扩大到点击整个单元格都可以查看。 在 el-table-column 中的 template 标签里,添加一个 div元素 包裹版本号和el-tag,将点击事件绑定在div元素上 :

    2024年02月12日
    浏览(44)
  • element-ui中的el-table合并单元格

    在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下:  而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下:   1:html部分 所谓的合并行就是将多行相同

    2024年02月10日
    浏览(43)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(55)
  • vue(element ui )el-table树形表格展示及数据对齐

    注意点: el-table配置里 row-key 必须是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置为后端返回的节点字段即可

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包