VUE如何实现记账凭证模块组件
导读：本文共2886字符，通常情况下阅读需要10分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 效果如下所示：<template> <divclass="voucher-container"> <divclass="voucher_header"> <divclass="voucher_header_title&quo... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。效果如下所示：
<template> <divclass="voucher-container"> <divclass="voucher_header"> <divclass="voucher_header_title">记账凭证</div> <divclass="voucher_header_number">单据号:{{voucher.numberId}}</div> </div> <tableclass="voucher"cellpadding="0"cellspacing="0"> <thead> <tr> <thclass="voucher_summary">摘要</th> <thclass="voucher_subject">会计科目</th> <thclass="voucher_money"> <strongclass="voucher_title">借方金额</strong> <divclass="voucher_columnvoucher_unit"> <span>亿</span> <span>千</span> <span>百</span> <span>十</span> <span>万</span> <span>元</span> <span>角</span> <spanclass="voucher_last">分</span> </div> </th> <strongclass="voucher_title">贷方金额</strong> </tr> </thead> <tbody> <trclass="voucher_item"v-for="(item)invoucher.items":key="item.id"> <tdclass="voucher_summary">{{item.summart}}</td> <tdclass="voucher_subject">{{item.subject}}</td> <tdclass="voucher_debite"> <divclass="voucher_number"><money-format:number="item.debite"></money-format></div> </td> <tdclass="voucher_credit"> <divclass="voucher_number"><money-format:number="item.credit"></money-format></div> </tbody> <tfoot> <tdclass="voucher_total"colspan="2"> 合计： <money-format:number="voucher.total":chinese="true"></money-format> <divclass="voucher_number"><money-format:number="voucher.debite":colour="true"></money-format></div> <divclass="voucher_number"><money-format:number="voucher.credit":colour="true"></money-format></div> </tfoot> </table> <divclass="voucher_footer">制单人:{{voucher.bookkeeper}}</div> </div></template><script>importMoneyFormatfrom'./MoneyFormat';exportdefault{ name:'Voucher', props:{ voucher:{ type:Object, } }, components:{ MoneyFormat }};</script><stylelang="less"rel="stylesheet/less">.voucher-container{ height:100%; width:100%; overflow:hidden; margin:0.625rem; padding:0;}.voucher_header{ padding-top:20px; margin-bottom:10px;.voucher_header_title{ float:left; display:inline; margin:-20px130px0px100px; font:28px/1.8'MicrosoftYahei'; text-align:center; text-shadow:1px1px1pxrgba(0,0,0,0.2);.voucher_header_number{ text-align:left; margin-left:120px;.voucher_footer{ margin:10px; font-weight:bold;.voucher{ border-collapse:collapse; th, td{ border:1pxsolid#ccc; height:35px; th{ height:48px; color:#555555; font-size:14px; text-align:center; font-weight:bold; overflow:hidden; .voucher_title{ display:block; height:25px; line-height:25px; .voucher_last{ margin-right:0; width:18px; .voucher_money{ font-size:12px; min-width:221px; span{ float:left; display:inline; width:19px; height:100%; margin-right:1px; .voucher_column, .voucher_credit, .voucher_debite{ background-image:url(../assets/image/money_column.png); background-repeat:repeat-y; .voucher_summary{ min-width:6.25rem; word-break:break-all; word-wrap:break-word; .voucher_subject{ .voucher_unit{ height:22px; line-height:22px; font-weight:normal; border-top:1pxsolid#dadada; .voucher_total{ letter-spacing:1px; .voucher_number{ position:relative; font-family:'tahoma'; letter-spacing:11px; text-align:right; right:-5px; .voucher_item{</style> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
VUE如何实现记账凭证模块组件的详细内容，希望对您有所帮助，信息来源于网络。