a-table 边框颜色修改

news2024/11/23 23:20:50

案例:

<template>
    <div class="mod_table">
        <a-table 
        :columns="columns"
        :data-source="data" 
        bordered
        :pagination="false"
        >
        </a-table>
    </div>
</template>
<script>
export default {
   name: 'ModuleTable', 
   props: {
   },
   components: {

   },
   data () {
     return {
        columns : [
            {
                title: '姓名',
                dataIndex: 'name',
                align:"center"
            },
            {
                title: '年龄',
                dataIndex: 'age',
                align:"center"
            },
            {
                title: '地址',
                dataIndex: 'address',
                align:"center"
            },
        ],
        data : [
            {
                key: '1',
                name: 'Tony',
                age:"23",
                address: 'New York No. 1 Lake Park',
            },
            {
                key: '2',
                name: 'Alice',
                age:"26",
                address: 'London No. 1 Lake Park',
            },
            {
                key: '3',
                name: 'Louise',
                age:"26",

                address: 'Sidney No. 1 Lake Park',
            },
        ]
     }
   },
   methods: {
   },
   computed: {

   },
}
</script>
<style scoped lang='less'>
    .mod_table{
        /deep/.ant-table-thead > tr > th {
            border-top: 1px solid red;
            border-left: 1px solid red;
            border-bottom: 1px solid red;
        }
        /deep/.ant-table-thead > tr > th:last-of-type {
            border-right: 1px solid red;
        }
        /deep/.ant-table-tbody > tr > td{
            border-bottom: 1px solid red;
            border-left: 1px solid red;
        }
        /deep/.ant-table-tbody > tr > td:last-of-type{
            border-right: 1px solid red;
        }
    }
</style>

效果:

a-table 组件没有比较直接的修改边框的属性,需要根据不同的类依次修改。

可以声明一个颜色变量,便于直接修改,如下:

<style scoped lang='less'>
    .mod_table {
        --back-color: red;
      }
    .mod_table{
        /deep/.ant-table-thead > tr > th {
            padding: 7px 5px;
            border-top: 1px solid var(--back-color);
            border-left: 1px solid var(--back-color);
            border-bottom: 1px solid var(--back-color);
        }
        /deep/.ant-table-thead > tr > th:last-of-type {
            border-right: 1px solid var(--back-color);
        }
        /deep/.ant-table-tbody > tr > td{
            padding: 7px 5px;
            border-bottom: 1px solid var(--back-color);
            border-left: 1px solid var(--back-color);
        }
        /deep/.ant-table-tbody > tr > td:last-of-type{
            border-right: 1px solid var(--back-color);
        }
    }
</style>

如果要对指定列指定单元格进行样式修改可以这样:

<template>
    <div class="mod_table">
        <a-table 
         :columns="renderColumns(columns)"
        :data-source="data" 
        bordered
        :pagination="false"
        >
        </a-table>

    </div>
</template>

<script>
export default {
   name: 'ModuleTable', 
   props: {
   },
   components: {

   },
   data () {
     return {
        columns : [
            {
                title: '姓名',
                dataIndex: 'name',
                align:"center"
            },
            {
                title: '年龄',
                dataIndex: 'age',
                align:"center"
            },
            {
                title: '地址',
                dataIndex: 'address',
                align:"center"
            },
        ],
        data : [
            {
                key: '1',
                name: 'Tony',
                age:"23",
                address: 'New York No. 1 Lake Park',
            },
            {
                key: '2',
                name: 'Alice',
                age:"26",
                address: 'London No. 1 Lake Park',
            },
            {
                key: '3',
                name: 'Louise',
                age:"26",

                address: 'Sidney No. 1 Lake Park',
            },
        ]
     }
   },
   methods: {
    renderColumns() {
    return this.columns.map(item => {
      return {
        ...item,
        customCell(record, index) {
            console.log("===",record,index)
          return {
            style: {
                   // 单元格背景色
                  'background-color':item.title=="年龄" ? 'red':"white"
                }
          }
        },
        customHeaderCell(record, index){
          return {
            style: {
                   // 头部单元格背景色
                  'background-color':item.title=="地址" ? 'yellow':"white"
                }
          }
        }
      }
    })
  }
   },
   mounted() {

   },
   watch: {

   },
   computed: {

   },
   filters: {

   }
}
</script>

<style scoped lang='less'>
    .mod_table {
        --back-color: rgb(169, 169, 169);
      }
    .mod_table{
        /deep/.ant-table-thead > tr > th {
            padding: 7px 5px;
            border-top: 1px solid var(--back-color);
            border-left: 1px solid var(--back-color);
            border-bottom: 1px solid var(--back-color);
        }
        /deep/.ant-table-thead > tr > th:last-of-type {
            border-right: 1px solid var(--back-color);
        }
        /deep/.ant-table-tbody > tr > td{
            padding: 7px 5px;
            border-bottom: 1px solid var(--back-color);
            border-left: 1px solid var(--back-color);
        }
        /deep/.ant-table-tbody > tr > td:last-of-type{
            border-right: 1px solid var(--back-color);
        }
    }
</style>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1400791.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

sshpass的安装与使用

一.简介 1.定义&#xff1a; ssh 登陆不能在命令行中指定密码&#xff0c;sshpass 的出现则解决了这一问题。它允许你用 -p 参数指定明文密码&#xff0c;然后直接登录远程服务器&#xff0c;它支持密码从命令行、文件、环境变量中读取。 2.使用 sshpass 原因 使用 sshpass…

代码随想录 Leetcode20. 有效的括号

题目&#xff1a; 代码(首刷自解 2024年1月21日&#xff09;&#xff1a; class Solution {bool check(char ch1,char ch2) {if(ch1 ) && ch2 ! () return true;else if(ch1 ] && ch2 ! [) return true;else if(ch1 } && ch2 ! {) return true;els…

C++——数组、多维数组、简单排序、模板类vector

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

FaFu--练习复盘--2

3、函数练习 3.1、函数表达式&#xff08;1&#xff09; 描述 根据以下公式计算数学表达式的值&#xff0c;并将结果作为函数值返回。在main()函数中输入x&#xff0c;调用函数fun(x)&#xff0c;并输出fun(x)的值。 输入 输入1行&#xff0c;包含1个double类型的浮点数&…

数学建模实战Matlab绘图

二维曲线、散点图 绘图命令&#xff1a;plot(x,y,’line specifiers’,’PropertyName’,PropertyValue) 例子&#xff1a;绘图表示年收入与年份的关系 ‘--r*’:--设置线型&#xff1b;r:设置颜色为红色&#xff1b;*节点型号 ‘linewidth’&#xff1a;设置线宽&#xff1…

基于springboot+vue考编论坛

摘要 近年来&#xff0c;随着互联网的迅猛发展&#xff0c;编程论坛成为程序员们交流学术、分享经验的重要平台之一。为了满足广大程序员的需求&#xff0c;本文基于Spring Boot和Vue框架&#xff0c;设计并实现了一个功能强大的编程论坛。首先&#xff0c;我们选择Spring Boot…

RHEL - 更新升级软件或系统

《OpenShift / RHEL / DevSecOps 汇总目录》 文章目录 小版本软件更新yum update 和 yum upgrade 的区别升级软件和升级系统检查软件包是否可升级指定升级软件使用的发行版本方法1方法2方法3方法4 查看软件升级类型更新升级指定的 RHSA/RHBA/RHEA更新升级指定的 CVE更新升级指定…

当 OpenTelemetry 遇上阿里云 Prometheus

作者&#xff1a;逸陵 背景 在云原生可观测蓬勃发展的当下&#xff0c;想必大家对 OpenTelemetry & Prometheus 并不是太陌生。OpenTelemetry 是 CNCF&#xff08;Cloud Native Computing Foundation&#xff09;旗下的开源项目&#xff0c;它的目标是在云原生时代成为应…

Softmax函数介绍

Softmax函数是一种常用的激活函数&#xff0c;用于将一组实数值转换为概率分布。它常用于多类别分类问题中&#xff0c;将输入向量映射为各个类别的概率。 Softmax函数的公式如下&#xff1a; 其中&#xff0c;示输入向量的第 &#xfffd;i 个元素&#xff0c;&#xfffd;n …

【目标检测】YOLOv5算法实现(九):模型预测

本系列文章记录本人硕士阶段YOLO系列目标检测算法自学及其代码实现的过程。其中算法具体实现借鉴于ultralytics YOLO源码Github&#xff0c;删减了源码中部分内容&#xff0c;满足个人科研需求。   本系列文章主要以YOLOv5为例完成算法的实现&#xff0c;后续修改、增加相关模…

RHCE上课笔记(前半部分)

第一部分 网络服务 第一章 例行性工作 1.单一执行的例行性工作 单一执行的例行性工作&#xff08;就像某一个时间点 的闹钟&#xff09;&#xff1a;仅处理执行一次 1.1 at命令&#xff1a;定时任务信息 [rhellocalhost ~]$ rpm -qa |grep -w at at-spi2-core-2.40.3-1.el9.x…

SDCMS靶场通过

考察核心&#xff1a;MIME类型检测文件内容敏感语句检测 这个挺搞的&#xff0c;一开始一直以为检查文件后缀名的&#xff0c;每次上传都失败&#xff0c;上传的多了才发现某些后缀名改成php也可通过&#xff0c;png图片文件只把后缀名改成php也可以通过&#xff0c;之前不成功…

最全机器学习预测全家桶,持续更新!看这一篇绝对够了!MATLAB代码

全家桶一直在持续更新中&#xff0c;截止到本期&#xff0c;一共发了7篇关于机器学习预测全家桶的文章。且后续还会继续更新。参考文章如下&#xff1a; 1.五花八门的机器学习预测&#xff1f;一篇搞定不行吗&#xff1f; 2.机器学习预测全家桶&#xff0c;多步预测之BiGRU、Bi…

阿里云国外服务器多少钱一个月?24元/月

阿里云国外服务器优惠活动「全球云服务器精选特惠」&#xff0c;国外服务器租用价格24元一个月起&#xff0c;免备案适合搭建网站&#xff0c;部署独立站等业务场景&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云国外服务器优惠活动&#xff1a; 全球云服务器精选特惠…

代码随想录刷题题Day38

刷题的第三十八天&#xff0c;希望自己能够不断坚持下去&#xff0c;迎来蜕变。&#x1f600;&#x1f600;&#x1f600; 刷题语言&#xff1a;C Day38 任务 ● 300.最长递增子序列 ● 674. 最长连续递增序列 ● 718. 最长重复子数组 1 最长递增子序列 300.最长递增子序列 …

运筹说 第107期 | 排队论创始人——阿格纳·克拉鲁普·爱尔朗

前面我们已经了解了非线性规划的相关内容&#xff0c;相信大家一定也有所收获&#xff0c;下面我们将带着大家继续了解排队论的相关内容&#xff0c;在本次文章中我们将一起走近排队论的奠基人——阿格纳克拉鲁普爱尔朗&#xff08;Agner Krarup Erlang&#xff09;&#xff0c…

x-cmd pkg | jieba - 中文结巴分词工具

目录 简介首次用户功能特点竞品分析进一步阅读 简介 结巴中文分词&#xff08;jieba&#xff09;是一款在 Python 环境下使用的开源中文文本分词工具。它支持多种分词模式&#xff0c;包括精确模式、全模式和搜索引擎模式&#xff0c;同时支持繁体分词和自定义词典。因其易用性…

【JavaEE】_基于UDP实现网络通信

目录 1. 服务器 1.1 实现逻辑 1.2 代码 1.3 部分代码解释 2. 客户端 2.1 实现逻辑 2.2 代码 2.3 客户端部分代码解释 3. 程序运行结果 4. 服务器客户端交互逻辑 此篇内容为实现UDP版本的回显服务器echo server&#xff1b; 普通服务器&#xff1a;收到请求&#xff…

Unity中ShaderGraph下获取主灯

文章目录 前言一、ShaderGraph获取主灯1、创建ShaderGraph2、创建一个自定义方法&#xff08;Custom Function&#xff09;节点3、新建两个 Vector3 类型的输出变量4、选择自定义节点程序体为 string 类型5、编写程序体6、我们输出主光方向看看效果7、我们输出主光颜色看看效果…

ios适配虚拟home键

在H5开发过程中遇到一个兼容性问题。iphone手机的虚拟home键会对屏幕底部的内容造成遮挡。要处理此问题&#xff0c;需要清楚安全区域这个概念。 安全区域 根据刘海和虚拟Home键&#xff0c;Apple为其设备提供了屏幕安全区域的视觉规范 竖屏&#xff1a;竖屏的时候&#xff…