2018-9-3-vue的tabs表单代码的思考

最新推荐文章于 2024-08-22 07:35:03 发布
转载 最新推荐文章于 2024-08-22 07:35:03 发布 · 111 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yangzhu/p/9578739.html
文章标签：

#javascript #ViewUI

本文介绍了一种票据批次管理界面的设计方案，包括修改页面、创建tabs页面等，并详细展示了各部分的代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

一、最初的修改页面

 

<el-dialog
        title="修改"
        :visible.sync="updateVisible"
        v-if="updateVisible"
        width="65%">
<bill-batch-update-tabs ref="billBatchUpdateTabs" @refreshTable="refreshTable"
                            @closeDialog="updateVisible = false"
                            :data="row"></bill-batch-update-tabs>
</el-dialog>

 

二、创建 tabs 页面

 

<template>
 <el-tabs v-model="activeName">

 这里是两个tabs显示页面 ，可以进行自行添加

        <el-tab-pane label="票据批次信息" name="first">
            <bill-batch-update ref="billBatchUpdate" @refreshTable="refresh"
                               @closeDialog="closeDialog"
                               :data="data"></bill-batch-update>
        </el-tab-pane>

        <el-tab-pane label="票据列表" name="second">
            <bill-member-batch-list :batchNo="batchNo" :billTotalAmt="billTotalAmt" :actAmt="actAmt" :intAmt="intAmt" flag="updateMember"></bill-member-batch-list>
        </el-tab-pane>

    </el-tabs>
</template>

<script>

    import billMemberBatchList from "~/views/biz/billMember/billMemberBatchList";
    import billBatchUpdate from "./billBatchUpdate";

    export default {
        name: "billBatchUpdateTabs",
        components: {billBatchUpdate, billMemberBatchList},
        props: {
            data: Object,
        },
        data() {
            return {
                activeName: 'first',
                batchNo: this.data.batchNo,
                billTotalAmt: this.data.billTotalAmt,
                actAmt: this.data.actAmt,
                intAmt: this.data.intAmt,
            }
        },
        methods: {
            tabsDialogOnSubmit(dialog) {
                this.$refs[dialog].onSubmit();
            },
            closeDialog() {
                this.$emit('closeDialog')
            },
            refresh() {
                this.$emit('refreshTable')
            }
        }
    }
</script>



三、分别进行页面的书写



<template>
    <div>
        <el-card class="box-card" shadow="never">
            <el-form ref="searchParams" :model="searchParams" label-width="100px" :prop="searchParams">
                <el-row type="flex" class="row-bg" justify="start">
                    <el-col :span="8" :offset="1">
                        <el-form-item label="批次号" prop="batchNo">
                            <el-input type="text" v-model="searchParams.batchNo" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item label="汇票总金额" prop="billTotalAmt">
                            <el-input type="text" v-model="searchParams.billTotalAmt" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="start">
                    <el-col :span="8" :offset="1">
                        <el-form-item label="实付总金额" prop="actAmt">
                            <el-input type="text" v-model="searchParams.actAmt" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1">
                        <el-form-item label="利息总金额" prop="intAmt">
                            <el-input type="text" v-model="searchParams.intAmt" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card class="box-card" shadow="never">
            <el-row type="flex" class="row-bg" justify="start" style="padding-bottom: 10px">
                <!-- 业务申请页面需要的按钮 -->
                <el-button v-if="isInto" size="mini" type="success" icon="el-icon-view"
                           @click="intoVisible = true">引入批次
                </el-button>
                <el-button v-if="isAdd" size="mini" type="success" icon="el-icon-plus" @click="addBillMemberBatchData">
                    新增
                </el-button>
                <el-button v-if="isDelete" size="mini" type="danger" icon="el-icon-delete"
                           @click="delBillMemberBatchData">删除
                </el-button>
                <el-button v-if="isUpdate" size="mini" type="warning" icon="el-icon-edit"
                           @click="updatebillMemberBatchData">修改
                </el-button>
                <el-button size="mini" type="primary" icon="el-icon-view" @click="viewBillMemberBatchData">查看
                </el-button>
            </el-row>
            <elx-table ref="table"
                       :url="url"
                       :columns="columns"
                       :initParams="initParams"
                       :searchParams="searchParams"
                       :checkbox="false"
            >
            </elx-table>
            <el-dialog
                    title="用户信息选择"
                    :visible.sync="intoVisible"
                    v-if="intoVisible"
                    append-to-body
                    width="60%"
                    :close-on-click-modal="false"
                    v-drag>
                <bill-batch-list ref="billMemberBatchAdd" @refreshTable="search"
                                 @closeDialog="intoVisible = false"></bill-batch-list>
            </el-dialog>
            <el-dialog
                    title="新增"
                    :visible.sync="addVisible"
                    v-if="addVisible"
                    append-to-body
                    width="60%"
                    :close-on-click-modal="false"
                    v-drag>
                <bill-member-batch-add ref="billMemberBatchAdd" @refreshTable="search"
                                       @closeDialog="addVisible = false" :batchNo="batchNo"></bill-member-batch-add>
            </el-dialog>
            <el-dialog
                    title="新增票据批次信息"
                    :visible.sync="addLoanVisible"
                    v-if="addLoanVisible"
                    append-to-body
                    width="60%"
                    :close-on-click-modal="false"
                    v-drag>
                <bill-batch-add ref="billMemberLoanAdd" @refreshTable="search"
                                @closeDialog="addLoanVisible = false" :applyInfo="applyInfo"></bill-batch-add>
            </el-dialog>
            <el-dialog
                    title="修改"
                    :visible.sync="updateVisible"
                    v-if="updateVisible"
                    append-to-body
                    width="65%">
                <bill-member-batch-update-tabs ref="billMemberBatchUpdateTabs" @refreshTable="refresh" @closeDialog="updateVisible = false" :billIncome="billIncome"
                                               :billIncomeList="billIncomeList"></bill-member-batch-update-tabs>
            </el-dialog>
            <el-dialog
                    title="查看"
                    :visible.sync="viewVisible"
                    v-if="viewVisible"
                    append-to-body
                    width="60%">
                <bill-member-batch-view-tabs @closeDialog="viewVisible = false"
                                             :data="row"></bill-member-batch-view-tabs>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import billMemberBatchAdd from "~/views/biz/billMember/billMemberBatchAdd";
    import billMemberBatchUpdateTabs from "~/views/biz/billMember/billMemberBatchUpdateTabs";
    import billMemberBatchViewTabs from "~/views/biz/billMember/billMemberBatchViewTabs";
    import BillBatchAdd from "~/views/biz/bill/billBatchAdd";
    import BillBatchList from "~/views/biz/bill/billBatchList";

    export default {
        name: "billMemberBatchList",
        components: {
            BillBatchList,
            BillBatchAdd,
            billMemberBatchAdd,
            billMemberBatchUpdateTabs,
            billMemberBatchViewTabs
        },
        props: {
            batchNo: String,
            billTotalAmt: String,
            actAmt: String,
            intAmt: String,
            flag: String,

            //业务申请页面传过来的数据
            operate: String,
            applyInfo: Object,
            //合同页面传过来的数据
            params: Object,
        },
        created() {
            if (this.flag === "apply") {
                this.initParams = {"applyNo": this.applyInfo.applyNo};
                this.url = "/loan/billBatchAction.do?_md=selectBillDetailByApplyNo";
                const _this = this;
                this.$http.post("/loan/billBatchAction.do?_md=selectBillBatchByApplyNo",
                    {"applyNo": this.applyInfo.applyNo}).then(response => {
                    if (response.data) {
                        _this.isInto = false;
                        _this.isAdd = false;
                        _this.predDiscDate = response.data.predDiscDate;
                        _this.applyBatchNo = response.data.batchNo;
                    }
                });
            } else if (this.flag === "cont") {
                this.initParams = {"contNo": this.params.contNo};
                this.url = "/loan/billBatchAction.do?_md=selectBillDetailByContNo";
                const _this = this;
                this.$http.post("/loan/billBatchAction.do?_md=selectBillBatchByContNo",
                    {"contNo": this.params.contNo}).then(response => {
                    if (response.data) {
                        _this.isInto = false;
                        _this.isAdd = false;
                        _this.isUpdate = false;
                        _this.predDiscDate = response.data.predDiscDate;
                        _this.applyBatchNo = response.data.batchNo;
                    }
                });
            } else {
                this.isInto = false;
                this.url = "/loan/billDetailAction.do?_md=selectBillDetailByBatchNo";
            }
        },
        data() {
            return {
                //业务申请所需变量
                isInto: true,
                isAdd: true,
                isUpdate: true,
                isDelete: true,
                addLoanVisible: false,

                url: "",
                addUrl: "/loan/billDetailAction.do?_md=insertBillDetail",
                intoVisible: false,
                addVisible: false,
                deleteVisible: false,
                updateVisible: false,
                viewVisible: false,
                billIncome: {},
                initParams: {},
                billIncomeList: {},
                row: {},
                searchParams: {
                    batchNo: this.batchNo, billTotalAmt: this.billTotalAmt, actAmt: this.actAmt, intAmt: this.intAmt
                },
                columns: [{
                    prop: "billNo",
                    label: "票据号"
                }, {
                    prop: "billType",
                    label: "票据种类",
                    selectKey: 'STD_DRFT_TYPE'
                }, {
                    prop: "ccy",
                    label: "币种",
                    selectKey: 'STD_ZX_CUR_TYPE'
                }, {
                    prop: "billAmt",
                    label: "票面金额"
                }, {
                    prop: "signAddr",
                    label: "汇票签发地",
                    selectKey: 'STD_ZB_DRFT_ADDR'
                }, {
                    prop: "oppBankName",
                    label: "是否电子汇票",
                    selectKey: 'STD_ZX_YES_NO'
                }, {
                    prop: "billIssueDate",
                    label: "出票日期"
                }, {
                    prop: "billEndDate",
                    label: "票据到期日期",
                    selectKey: 'STD_ZB_GROUP_TYPE'
                }, {
                    prop: "payee",
                    label: "收款人名称"
                }, {
                    prop: "sts",
                    label: "票据状态",
                    selectKey: 'STD_ZB_DRFT_STATUS'
                }],
            }
        },
        methods: {
            getSelectRows() {
                return this.$refs.table.getSelectedRows();
            },
            search() {
                this.$refs.table.search();
            },
            resetForm() {
                this.$refs.searchParams.resetFields();
            },
            refresh() {
                this.$refs.table.refresh();
            },
            addBillMemberBatchData() {
                if (this.flag === "apply") {
                    this.addLoanVisible = true
                } else {
                    this.addVisible = true
                }
            },
            delBillMemberBatchData() {
                const rows = this.getSelectRows();
                const _this = this;
                if (rows.length !== 1) {
                    this.$error("请选择一行数据");
                    return;
                }
                const billNo = rows[0].billNo;
                this.$http.post("/loan/billDetailAction.do?_md=deleteBillDetailByPrimaryKey",
                    {"billNo": billNo}).then(function (response) {
                    if (response.success) {
                        _this.$success(response.msg);
                        _this.$refs.table.refresh();
                    }
                }).catch(function (error) {
                    _this.$error(error.message);
                })
            },
            updatebillMemberBatchData() {
                const rows = this.getSelectRows();
                if (rows.length !== 1) {
                    this.$error("请选择一行数据");
                    return;
                }
                this.billIncomeList = {...rows[0]};

                this.$http.post("/loan/billIncomeAction.do?_md=selectBillIncomeByPrimaryKey", {"billNo": this.billIncomeList.billNo}).then((response) => {
                    if (response.success) {
                        this.billIncome = response.data;
                        // this.row = rows;
                        this.updateVisible = true;
                    } else {
                        this.$error(response.msg);
                    }
                }).catch((error) => {
                    this.$error(error.message);
                });
            },
            viewBillMemberBatchData() {
                const rows = this.getSelectRows();
                const _this = this;
                if (rows.length !== 1) {
                    _this.$error("请选择一行数据");
                } else {
                    _this.row = {...rows[0]};
                    _this.viewVisible = true;
                }
            },
            dialogOnSubmit(dialog) {
                this.$refs[dialog].onSubmit();
            }
        }
    }
</script>




 


转载于:https://www.cnblogs.com/yangzhu/p/9578739.html

                

        




    

    
  



    



                



	

		

			

				
					
【实操】vue+element UI tab页多表单合并校验提交

				
			

			

				

					qq_41852789的博客
				

				

					06-16
					
					6059
					
				

			

		

		

			
				
一个页面中tab栏切换多个form表单组件，只有一个保存按钮。需要把各组件下的表达数据合并校验提交。

			
		

	



                

            
              



	

		

			

				
					
【Ant-Design-Vue】1、简介与安装

				
			

			

				

					weixin_52938153的博客
				

				

					06-10
					
					3621
					
				

			

		

		

			
				
如果希望对 Ant-Design-Vue 的默认样式进行自定义，可以通过修改 Less 变量来实现。以下是自定义主题的步骤：在css: {less: {},},},},在// 引入 less 文件。

			
		

	



              


  
              

                


	

		

			

				
					
vue前端表单插件支持栅格和tab 嵌套布局，支持表格定义，适应于做动态数据模型管理

				
			

			

				

					06-24
				

			

		

		

			
				
支持栅格和tab 嵌套布局，支持表格定义，适应于做动态数据模型管理。基于formmaking开源代码增加响应的功能，该插件仅供学习交流。

			
		

	





	

		

			

				
					
页面的刷新

				
			

			

				

					weixin_57400398的博客
				

				

					04-24
					
					186
					
				

			

		

		

			
				
页面刷新

			
		

	



		

			
		



	

		

			

				
					
前端编辑后调用父组件刷新this.$emit(‘refresh‘)

				
			

			

				

					qq_38978882的博客
				

				

					03-29
					
					665
					
				

			

		

		

			
				
前端编辑后调用父组件刷新this.$emit('refresh')

			
		

	





	

		

			

				
					
vue-form-wizard：Vue.js 2向导

				
			

			

				

					02-06
				

			

		

		

			
				
Vue表单向导  动态向导可轻松拆分表单 Vue-form-wizard是基于vue的组件，没有外部依赖关系，从而简化了选项卡向导的管理。 演示：  基本 其他演示： 从任何步骤开始。 注意：start-index从零开始，计数从0开始 替换...

			
		

	





	

		

			

				
					
Vue.js组件tabs实现选项卡切换效果

				
			

			

				

					10-20
				

			

		

		

			
				
在Vue.js中，组件是可复用的代码单元，它们是构建用户界面的基本模块。`tabs`组件是一种常见的UI元素，用于展示多个视图或内容，用户可以通过不同的标签来切换这些视图。在这个例子中，我们将探讨如何使用Vue.js创建...

			
		

	





	

		

			

				
					
Ant-Design-Vue快速上手指南+排坑

				
			

			

				

					m0_73085893的博客
				

				

					08-22
					
					1336
					
				

			

		

		

			
				
Ant Design Vue 提供了一套灵活的样式定制方案，允许开发者根据品牌或项目需求，调整组件的样式和颜色。Less 变量覆盖：Ant Design Vue 的样式基于 Less，通过覆盖 Less 变量来实现主题定制。开发者可以在项目中创建一个 Less 文件，例如theme.less，来定义自定义的变量值。// 自定义主题变量// 全局主色// 链接色// ... 更多变量Webpack 配置：在项目的 Webpack 配置中，通过的modifyVars选项引入自定义的 Less 变量。

			
		

	





	

		

			

				
					
解决vue-router 切换tab标签关闭时缓存问题

				
			

			

				

					01-19
				

			

		

		

			
				
 component: resolve => require([&#39;@/pages/product/fundPros/fundTab/fundTab.vue&#39;], resolve),  title: &#39;基金首页&#39;,  redirect: &#39;fundProListG/fundProListG&#39;,  meta: {  keepAlive: false // 不需要被缓存  },  ...

			
		

	





	

		

			

				
					
Vue子组件向父组件传值this.$emit()

				
			

			

				

					冲出仁川，走出马德里，故事还会再继续
				

				

					05-29
					
					3092
					
				

			

		

		

			
				
Vue子组件向父组件传值this.$emit1、问题描述2、解决方案：`this.$emit()`方法
1、问题描述
  今天碰到了个问题，我有个属性分组的页面，该页面中引入两个子组件，一个是左侧的属性菜单子组件，另一个是新增按钮的对话框组件。右侧为一个表格，显示左边树形菜单中三级分类的所有商品。
  但是通过新增按钮添加商品之后，右侧的表格并不会刷新显示最新的数据。


  我们的目的是子组件中表单提交之后通知父组件刷新表格中的数据。
2、解决方案：this.$emit()方法
  子组件某些功能想要与父

			
		

	





	

		

			

				
					
2018-2-24-vue的add添加代码

				
			

			

				

					养柱
				

				

					08-24
					
					2716
					
				

			

		

		

			
				
一、添加 button 按钮



&lt;el-button v-if="$route.meta.btns.addBtn" size="mini" type="success" icon="el-icon-plus" @click="addVisible = true"&gt;新增
&lt;/el-button&gt;


二、不要忘了在return 变量里声明



add

			
		

	





	

		

			

				
					
Vue Element组件动态el-tab嵌套form表单验证

				
			

			

				

					qq_33398946的博客
				

				

					12-02
					
					5361
					
				

			

		

		

			
				
想找动态增减tab页的表单动态验证示例，网上的文章基本上都是固定多tab页的验证，el-form-item的prop书写格式也极为麻烦，按搜到的文章教程敲了半天，一直报错prop路径不对。
最后索性直接在外层套一个div用if来控制dom中只显示当前选择的tab页，这样el-from-item中就不用:prop外加一大串的复杂路径拼接，还是用prop就能确定验证的字段路径了。
<el-tabs v-model="editableTabsValue" type="card" closable @tab-

			
		

	





	

		

			

				
					
Vue子组件向父组件传值（this.$emit()方法）

					
热门推荐

				
			

			

				

					sisi_chen的博客
				

				

					08-13
					
					27万+
					
				

			

		

		

			
				
子组件使用this.$emit()向父组件传值

首先必须在父组件中引用子组件，然后实现传值


	第一步 在父组件中引入子组件
	
使用import引入组件


import indexImportOrder from './components/indexImportOrder'

声明


//定义组件
      components:{
        indexImportOrder,...

			
		

	





	

		

			

				
					
【vue】子组件跟父组件通信this.$emit()的使用

				
			

			

				

					庭落
				

				

					05-06
					
					3536
					
				

			

		

		

			
				
父组件：
<template>
     <addcz @closecz="closecz"></addcz>
</template>

<script>
export default {
　　components: {
   　　 addcz
  　},
     methods: {
        closecz(){
      ...

			
		

	





	

		

			

				
					
VUE调用子页面弹窗或组件弹窗，关闭弹窗刷新父级页面主页面，通过this.$emit来实现

				
			

			

				

					小菜鸟的博客
				

				

					10-14
					
					9991
					
				

			

		

		

			
				
Vue 用this.$refs调用子页面窗口，关闭窗口用this.emit刷新父页面
this.$emit是父级向自己传值
第一步在父级页面创建自己页面的引用
<template>
  <div>
    <edit ref="edit" @refresh="search"></edit> //@refresh 这个命名可以自己改，edit是你子页面名字  ，search是我的方法名，ref就是我调用子页面弹窗的名字
  </div>
</t

			
		

	





	

		

			

				
					
今天遇到的坑--this.$emit

				
			

			

				

					weixin_33750452的博客
				

				

					12-24
					
					5484
					
				

			

		

		

			
				
写给赶时间的人
一句话
this.$emit('xxx', input), input最好是字符串, 如果需要传一个对象, 那么, 建议您在父组件里面, JSON.parse(input), 或者不要传原始对象, 需要const一个对象, 深拷贝您需要传的对象
写给有点时间看的人
作为一个半路出家的伪前端, 遇到坑, 基本都是因为自己基础知识不牢固, 例如今天遇到这个this.$emit的坑
需求...

			
		

	





	

		

			

				
					
vue——15-vue中的触发事件 this.$emit( 事件名 )

				
			

			

				

					肖的博客
				

				

					09-17
					
					1万+
					
				

			

		

		

			
				
&amp;amp;amp;lt;div id=&amp;amp;quot;enjoy&amp;amp;quot;&amp;amp;amp;gt;
    &amp;amp;amp;lt;!--
    使用$on(eventName)监听事件
    使用$emit(eventName)触发事件
    --&amp;amp;amp;gt;
    &amp;amp;amp;lt;my-btn @total=&amp;amp;quot;allc

			
		

	





	

		

			

				
					
2018-9-3-vue的tabs表单传值显示在form表单

				
			

			

				

					weixin_34357267的博客
				

				

					09-03
					
					611
					
				

			

		

		

			
				
一、点击修改按钮 ， 从后台查找数据一波

updateData: function () {    const rows = this.getSelectRows();    if (rows.length !== 1) {        this.$error("请选择一行数据");        return;    }    this.partnerApplyApply = {......

			
		

	





	

		

			

				
					
el-tabs表单怎么样子

					
最新发布

				
			

			

				

					01-18
				

			

		

		

			
				
上述代码展示了如何利用 Vue 组件化的方式将不同部分的内容拆分为独立的小型表单组件[^3]。  #### 自定义 `el-tabs` 样式  对于样式的定制，可以通过 CSS 深度选择器来覆盖默认样式。下面的例子说明了怎样让标签栏...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值