前言
今天下午做完了任务, 准备实现打印, 叫了一位前辈过来看看怎么用打印函数, 他说"哎你这数据怎么没做千分制呢, 参考上这得转千分制的."
我一看还真是, 没注意到, 后端给我的是单纯的数字, 但是这个如果要打印的话传值应该也会用到非千分制的数字型, 所以大概…不应该直接处理后端给我的数据, 最好仅仅渲染成千分制展示, 嗯, 那么最好该是在HTML里操作, 用插值表达式或许可以.
一、尝试思路
说的简单, 我们俩前端加一个看热闹的后端老哥搞了快二十分钟都没拿出来一个让我们自己满意的方案. 不过我们雀食一直在改善, 先是拿到了表数据, 然后想办法锁定到了列.
二十多分钟后插值表达式方向进入了瓶颈, 我们用scope.row
拿到数据后不知道如何在使用v-for
生成的Table
中拿到"列", 这时候后端提出在template
中利用v-for
用数组取值形式(好像是是scope.row[item.prop]
来着?)拿到scope.row
对象中的待检项, 但是这样其他项的数据又该如何展示.
这个问题引导我想起v-if
, 我一开始先是用了两个<template slot-scope="scope"></template>
分别加上v-if
和v-else
, 用遍历的item.prop
属性值是否等于待验的item.prop
来筛选需要的列, 但是这样不检验项仍旧无法显示, 这个插槽这样一来只被渲染成了每行的待检项, 普通项不渲染.
但是v-if
雀食给了我开了一扇大门, 我觉得这个方向或许能走通.
二、实现思路
我提出能不能在el-table-column
外面套一个空div
仅作遍历容器使用, 然后将两个el-table-column
放在div
内部, 在前面的el-table-column
上利用v-if
校验是否为千分制列, 另一个el-table-column
加v-else
用来展示常规内容, 这样不会重复遍历, 每次遍历也都是遍历一个el-table-column
, 我觉得可行.
每轮v-for
的el-table-column
在生成前都经过v-if校验, 决定生成两种中的哪种el-table-column
, 是需要校验的还是不需要的, 并且为需要校验的el-table-column
内部插入<template slot-scope="scope">{
{numberTocurrencyNo(scope.row.money)</template>
emmm…
我肯定是要改一改再拿出来的:
<!-- 虽然改了但是能跑 -->