vben Admin Table表格组件反转表格

反转表格
反转表格,只需要将 columns 和 data 数据进行反转
根据项目的需求,需要将表格进行反转,因为使用的vben Admin框架中的表格没有反转,所以需要自己去写,参考vxe-table框架中的反转表格来进行。

  1. 通过vben Admin 框架的table表格组件,将表格的形式显示出来

dataSource:表格数据
columns:表格列信息

在这里插入图片描述
这里的表格列信息是在另外一个data.ts文件中写的,所以需要在index.vue文件内引入
2.因为需求需要将表格进行反转,只需要将 columns 和 data 数据进行反转
在这里插入图片描述
在这里插入图片描述

因为数据需要通过接口来获取,所以使用了vue3的父子传参的方法,反转表格的主要在红色框框内。
在这里插入图片描述

3.需求要的是变更前和变更后的数据,为了区分哪些数据是变更过的,因此给它们添加了一个颜色

- 第一种方法
在这里插入图片描述
Ant Design Vue框架的rowClassName属性:表格行的类名,通过判断变更前和变更后的字段是否一样,不一样了就变成红色,一样的就不发生改变

- 第二种方法
在这里插入图片描述
通过使用插槽

4、data.ts文件内的一些数据
在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值