2018-10-12 - element-UI 画页面的思考

最新推荐文章于 2026-04-29 10:11:34 发布

原创最新推荐文章于 2026-04-29 10:11:34 发布 · 479 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

003

本文介绍了一个基于Element-UI的银行承兑汇票补充信息录入界面设计，包含申请人、承兑人等信息填写，以及相关费用计算说明和合同条款。通过此界面，用户可以便捷地输入补充信息并完成票据流程。

<template>
    <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="168px" size="small" :disabled="writeIf">
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>银行承兑汇票补充信息</span>
            </div>
            <el-row type="flex" class="row-bg" justify="start">
                <el-col :span="10">
                    <el-form-item label="申请人:" prop="custNo">
                        <el-input type="text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="2">
                    <el-form-item label="承兑人:" prop="custName">
                        <el-input type="text" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="start">
                <el-col :span="10">
                    <el-form-item label="送达地址:" prop="fncType">
                        <elx-select type="text" ></elx-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="2">
                    <el-form-item label="邮政编码:" prop="factType">
                        <elx-select type="text" ></elx-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="start">
                <el-col :span="10">
                    <el-form-item label="联系电话:" prop="prosecuteFlag">
                        <elx-select type="text" ></elx-select>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-card >
        <el-card>
            <div slot="header" class="clearfix">
                <span>第三条</span>
            </div>
             <span style="font-size: 20px">
                 承兑人有权依据相关法律法规规定，向申请人收取签发银行承兑汇票手续费，手续费包括基本手续费及风险手续费， 其中基本手续费按银行承兑汇票
票面金额的0.5‰计算。
             </span>
        </el-card>
        <el-card  class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>第七条 其他担保方式:</span>
                <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入内容"
                        v-model="textarea">
                </el-input>
            </div>
        </el-card>
        <el-card  class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span> 第十一条 其他事项</span>
            </div>
            <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="textarea">
            </el-input>
        </el-card>
        <el-card  class="box-card" shadow="never">

            <div slot="header" class="clearfix">
                <span> 第十二条 本合同一式 * 份，各方各持一份，担保人一份，效力相同</span>
            </div>
            <span>签约时间：2018-12-10 </span><br/>
            <span>签约地点: 苏宁银行</span>
        </el-card>
    </el-form>
        <div align="center" style="margin-top: 15px;" v-show="buttonShow">
            <el-button type="primary" @click="onSubmit">返回列表页面</el-button>
            <el-button type="primary" @click="onSubmit">影像调阅</el-button>
        </div>
        </div>
</template>

没有其他的话，主要是学会使用 element-ui 的官网

在上面搜索关键的标签

然后查看源码，复制过去就可以咯。哈哈