vue3 antd table表格的增删改查(三)实现删除的数据的行样式修改【后台管理系统 纯前端rowClassName更改行样式】

知识调用

文章中可能会用到的知识链接
vue3+ant design vue+ts实战【ant-design-vue组件库引入】🔥🔥
vue3 antd table表格的样式修改(二)利用rowClassName给table添加行样式🔥🔥
vue3 antd项目实战——table表格(一文带你快速实现后台管理系统最常用的table表格)🔥🔥

场景复现

vue3➕antd➕ts 的项目开发中,table表格无处不在,而对于table表格的操作有很多,比如 根据表格数据的属性显示不同的样式(颜色)。本期文章将以此为实例,提供详细方案实现需求。

表格初始状态:(如下图)

  • 含表格自带的斑马纹
  • 所有行样式一致,没有根据表格数据属性区分样式

未根据表格数据的属性进行区分👇👇👇
在这里插入图片描述

未根据表格数据属性对应去除斑马纹👇👇👇
在这里插入图片描述

表格样式需求:

  • 根据表格数据的属性渲染不同的颜色样式
  • 根据表格数据的属性去除相应数据的斑马纹样式

解决方案:

  • rowClassName ➕ 筛选条件 ➕ 样式函数
  • pointer-events: none; 取消斑马纹

利用rowClassName编写行样式

表格部分:点击了解表格是如何实现的🔥🔥
在这里插入图片描述
如上图,绑定rowclass属性,调用rowclassname函数。(此函数即为样式函数,用于调用新的行样式)

<a-table 
   :data-source="data" 
   :columns="columns" 
   style="width:100%"  
   :rowClassName="rowclassname" 
   >
   <!-- 表格内的一些组件-->
</table>

编写行样式函数➕筛选条件

样式函数部分:
在这里插入图片描述
如上图所示,返回新的行样式。这里使用了一个三目表达式,根据表格传递的数据的属性对应相应的行样式。

const rowclassname = (record:tableInt) => {
    // console.log("777",toRaw(record).deleted)
    return toRaw(record).deleted === 1 ? 'row-color' : ''
}

ps:

  • 这里的record是表格里的删除按钮传过来的值
  • 点击删除则会改变deleted属性的值
  • toRaw是vue3里的一个函数方法,主要作用是取消数据的跟踪,UI界面不会随之更新。
// 三目运算符在这里也可以用if语句替换
const rowclassname = (record:tableInt) => {
   if (record.deleted === 1) {
       return 'row-color'
   } else {
       return ''
   }
}

比如在这里,如果数据的deleted属性值为1,则返回特定的行样式,否则则保持原来的样式。

编写特定的行样式

style部分:

<style scoped lang="less">
/deep/ .row-color {
    background-color: rgb(255, 240, 240);
}

ps:

这个时候,我们来看一看目前为止的实现效果。👇👇👇

  • 当我们不触碰它的时候,显然实现了需求的第一条——根据表格数据的属性显示特定的行样式
    在这里插入图片描述
  • 但是当我们触碰它时,斑马纹仍然存在
    在这里插入图片描述

取消相应的斑马纹样式

在这里插入图片描述
在之前的基础上添加 pointer-events: none; 即可

<style scoped lang="less">
/deep/ .row-color {
    background-color: rgb(255, 240, 240);
    pointer-events: none;  /* 禁用*/
}
</style>

这个时候我们来看看效果👇👇👇
在这里插入图片描述
无论触碰与否,都不会有斑马纹样式。
显然,截至目前已经实现了需求的第二点——根据数据属性去除相应的斑马纹样式


截止目前,需求已经全部实现

后续将不定期持续更新相关内容~
觉得这篇文章有用的小伙伴们
可以点赞➕收藏➕关注哦~
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dorable_Wander

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值