Vue2 操作Element表格单列数据

本文讲述了在Vue2项目中遇到的表格数据处理问题,特别是如何在Element UI表格中实现单列数据的千分制显示。通过分析尝试思路和最终的实现方案,作者提供了一个在HTML中操作数据进行展示的方法,避免了直接修改后端数据,确保了正常数据的正确显示。
摘要由CSDN通过智能技术生成


前言

今天下午做完了任务, 准备实现打印, 叫了一位前辈过来看看怎么用打印函数, 他说"哎你这数据怎么没做千分制呢, 参考上这得转千分制的."
我一看还真是, 没注意到, 后端给我的是单纯的数字, 但是这个如果要打印的话传值应该也会用到非千分制的数字型, 所以大概…不应该直接处理后端给我的数据, 最好仅仅渲染成千分制展示, 嗯, 那么最好该是在HTML里操作, 用插值表达式或许可以.


一、尝试思路

说的简单, 我们俩前端加一个看热闹的后端老哥搞了快二十分钟都没拿出来一个让我们自己满意的方案. 不过我们雀食一直在改善, 先是拿到了表数据, 然后想办法锁定到了列.

二十多分钟后插值表达式方向进入了瓶颈, 我们用scope.row拿到数据后不知道如何在使用v-for生成的Table中拿到"列", 这时候后端提出在template中利用v-for用数组取值形式(好像是是scope.row[item.prop]来着?)拿到scope.row对象中的待检项, 但是这样其他项的数据又该如何展示.
这个问题引导我想起v-if, 我一开始先是用了两个<template slot-scope="scope"></template>分别加上v-ifv-else, 用遍历的item.prop属性值是否等于待验的item.prop来筛选需要的列, 但是这样不检验项仍旧无法显示, 这个插槽这样一来只被渲染成了每行的待检项, 普通项不渲染.
但是v-if雀食给了我开了一扇大门, 我觉得这个方向或许能走通.


二、实现思路

我提出能不能在el-table-column外面套一个空div仅作遍历容器使用, 然后将两个el-table-column放在div内部, 在前面的el-table-column上利用v-if校验是否为千分制列, 另一个el-table-columnv-else用来展示常规内容, 这样不会重复遍历, 每次遍历也都是遍历一个el-table-column, 我觉得可行.
每轮v-forel-table-column在生成前都经过v-if校验, 决定生成两种中的哪种el-table-column, 是需要校验的还是不需要的, 并且为需要校验的el-table-column内部插入<template slot-scope="scope">{ {numberTocurrencyNo(scope.row.money)</template>
emmm…
我肯定是要改一改再拿出来的:

<!-- 虽然改了但是能跑 -->
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值