How to realize the component of Accounting voucher Module in VUE
This article is about how VUE implements the accounting voucher module component. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
The effect is as follows:
Accounting voucher document number: {{voucher.numberId}} Abstract Accounting account Debit amount of 100 million Ten million. Yuan angular fraction Credit amount {{item.summart}} {{item .subject}} Total: Order maker: {{voucher.bookkeeper}} import MoneyFormat from'. / MoneyFormat' Export default {name: 'Voucher', props: {voucher: {type: Object,}}, components: {MoneyFormat}}; .voucher-container {height: 100%; width: 100%; overflow: hidden; margin: 0.625rem Padding: 0;}. Voucher_header {padding-top: 20px; margin-bottom: 10pxpoli.voucherbones headerboards title {float: left; display: inline; margin:-20px 130px 0px 100px; font: 28px/1.8 'Microsoft Yahei'; text-align: center; text-shadow: 1px 1px 1px rgba (0,0,0,0.2) .voucher _ header_number {text-align: left; margin-left: 120pxter.voucherkeeper footer {margin: 10px; font-weight: bold;.voucher {border-collapse: collapse; th, td {border: 1px solid # 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: 1px solid # dadada; .voucher _ total {letter-spacing: 1px Voucher _ number {position: relative; font-family: 'tahoma'; letter-spacing: 11px; text-align: right; right:-5px; .voucher _ item {Thank you for reading! On "VUE how to achieve accounting voucher module components" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!
