温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

VUE如何实现记账凭证模块组件

发布时间:2022-03-02 09:13:38 阅读:1148 作者:小新 栏目:开发技术
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家分享的是有关VUE如何实现记账凭证模块组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

效果如下所示:

VUE如何实现记账凭证模块组件

<template>
	<div class="voucher-container">
		<div class="voucher_header">
			<div class="voucher_header_title">记账凭证</div>
			<div class="voucher_header_number">单据号: {{voucher.numberId}}</div>
		</div>
		<table class="voucher" cellpadding="0" cellspacing="0">
			<thead>
				<tr>
					<th class="voucher_summary">摘要</th>
					<th class="voucher_subject">会计科目</th>
					<th class="voucher_money">
						<strong class="voucher_title">借方金额</strong>
						<div class="voucher_column voucher_unit">
							<span>亿</span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span class="voucher_last"></span>
						</div>
					</th>
						<strong class="voucher_title">贷方金额</strong>
				</tr>
			</thead>
			<tbody>
				<tr class="voucher_item" v-for="(item) in voucher.items" :key="item.id">
					<td class="voucher_summary">{{item.summart}}</td>
					<td class="voucher_subject">{{item.subject}}</td>
					<td class="voucher_debite">
						<div class="voucher_number"><money-format :number="item.debite"></money-format></div>
					</td>
					<td class="voucher_credit">
						<div class="voucher_number"><money-format :number="item.credit"></money-format></div>
			</tbody>
			<tfoot>
					<td class="voucher_total" colspan="2">
						合计:
						<money-format :number="voucher.total" :chinese="true"></money-format>
						<div class="voucher_number"><money-format :number="voucher.debite" :colour="true"></money-format></div>
						<div class="voucher_number"><money-format :number="voucher.credit" :colour="true"></money-format></div>
			</tfoot>
		</table>
		<div class="voucher_footer">制单人:{{voucher.bookkeeper}}</div>
	</div>
</template>
<script>
import MoneyFormat from './MoneyFormat';
export default {
	name'Voucher',
	props: {
		voucher: {
			typeObject,
		}
	},
	components: {
		MoneyFormat
	}
};
</script>
<style lang="less" rel="stylesheet/less">
.voucher-container {
	height100%;
	width100%;
	overflow: hidden;
	margin0.625rem;
	padding0;
}
.voucher_header {
	padding-top20px;
	margin-bottom10px;
.voucher_header_title {
	float: left;
	display: inline;
	margin: -20px 130px 0px 100px;
	font28px/1.8 'Microsoft Yahei';
	text-align: center;
	text-shadow1px 1px 1px rgba(0000.2);
.voucher_header_number {
	text-align: left;
	margin-left120px;
.voucher_footer {
	margin10px;
	font-weight: bold;
.voucher {
	border-collapse: collapse;
	th,
	td {
		border1px solid #ccc;
		height35px;
	th {
		height48px;
		color#555555;
		font-size14px;
		text-align: center;
		font-weight: bold;
		overflow: hidden;
	.voucher_title {
		display: block;
		height25px;
		line-height25px;
	.voucher_last {
		margin-right0;
		width18px;
	.voucher_money {
		font-size12px;
		min-width221px;
		span {
			float: left;
			display: inline;
			width19px;
			height100%;
			margin-right1px;
	.voucher_column,
	.voucher_credit,
	.voucher_debite {
		background-imageurl(../assets/image/money_column.png);
		background-repeat: repeat-y;
	.voucher_summary {
		min-width6.25rem;
		word-break: break-all;
		word-wrap: break-word;
	.voucher_subject {
	.voucher_unit {
		height22px;
		line-height22px;
		font-weight: normal;
		border-top1px solid #dadada;
	.voucher_total {
		letter-spacing1px;
	.voucher_number {
		position: relative;
		font-family'tahoma';
		letter-spacing11px;
		text-align: right;
		right: -5px;
	.voucher_item {
</style>

感谢各位的阅读!关于“VUE如何实现记账凭证模块组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI

开发者交流群×