vue + element 实现主页面，主页面查询，新增模态框功能

效果图

一、【主页面】list.vue

<template><!-- 外部用户 --><div class="externalUsers"><el-form :inline="true" :model="queryParam" ref="queryParam" label-width="90px" class="demo-form-inline"><el-form-item label="订单号：" prop="position"><el-input v-model="queryParam.order_num" placeholder="请输入"></el-input></el-form-item><el-form-item label="下单人：" prop="position"><el-input v-model="queryParam.create_name" placeholder="请输入"></el-input></el-form-item><el-button type="primary" size="small" @click="conditionQuery">查询</el-button><el-button size="small" @click="resetQuery()">重置</el-button></el-form><el-button type="primary" size='small' @click="handleAdd('【动态传参】')">新增</el-button><!-- 内容区 --><el-row><el-container class="mian"><!-- table表格 --><el-main><div class="table"><el-table ref="table":stripe="true" :data="tableData" :row-key="getRowKeys"size="small" :header-cell-style="{'text-align': 'center',background: '#fafafa'}" height="63vh"@selection-change="handleSelectionChange"><el-table-column type="selection" align="center" :reserve-selection="true" width="60"></el-table-column><el-table-column prop="order_num" label="订单号" sortable align="center"></el-table-column><el-table-column prop="create_name" label="下单人" sortable align="center" width="200"></el-table-column><el-table-column prop="create_phone" label="手机号" sortable align="center"></el-table-column><el-table-column prop="client_name" label="客户名称" sortable align="center"></el-table-column><el-table-column prop="annualCount" label="年费件数" sortable align="center"></el-table-column><el-table-column prop="all_official_fee" label="官费金额" sortable align="center"></el-table-column><el-table-column prop="all_agency_fee" label="代理费金额" sortable align="center"></el-table-column><el-table-column prop="order_status" label="订单状态" sortable align="center"></el-table-column><el-table-column prop="create_date" label="下单时间" sortable align="center" width="150"></el-table-column><el-table-column fixed="right" label="操作" align="center" width="220"><template slot-scope="scope"><el-button type="text" size="small" v-if="scope.row.order_status_code =='F' || scope.row.order_status_code =='A' || scope.row.order_status_code =='C' || scope.row.order_status_code =='D'"  @click="changeStatus('D',scope.row.order_num)">删除</el-button></template></el-table-column><!-- 空数据 --><div slot="empty" style="height: 63vh;display: flex;justify-content: center;align-items: center;"><div><img src="../../../static/img/Group 6.png" /><p>暂无数据</p></div></div></el-table><!-- 分页 --><div style="height: 50px;display: flex;justify-content: flex-end;align-items: center;margin-right: 10px;" class="myTranslationContent_page"><!-- 当前页数，支持 .sync 修饰符 1  --><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page.sync="params.currPage" :page-sizes="params.pageSizeArr":page-size="params.pageSize" :layout="params.layout":total="params.totalCount"></el-pagination></div></div></el-main></el-container></el-row><!-- 新增 --><com-modal ref="modalForm" @ok="modalFormOk"></com-modal></div>
</template>
<script>import comModal from './modules/comModal'import { CommonJs } from '../../api/common.js'   //引入公共jsexport default {mixins:[CommonJs],components: {comModal},data() {return {url:{list:"/api/AnnualFeeOrder/GetAnnualFeeOrderList",},};},computed: {},mounted() {},methods: {},created() {},};
</script><style scoped></style>

二、【新增form表单】comForm.vue

<template><div><el-form ref="form" :model="model" label-width="80px"><el-form-item label="活动名称"><el-input v-model="model.name" placeholder="请输入活动名称"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="model.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form></div>
</template><script>export default {data() {return {model:{}}},created() {this.modelDefault = JSON.parse(JSON.stringify(this.model));},methods:{submitForm(){//console.log(this.model);this.$emit('ok',this.model);   //触发父页面的submitCallback方法},}}
</script><style>
</style>

三、【新增模态框】comModal.vue

<template><div><el-dialog:title="title":visible.sync="dialogVisible"width="30%"><com-form ref="realForm" @ok="submitCallback"></com-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="handleOk">确 定</el-button></span></el-dialog></div>
</template>
<script>import comForm from './comForm'export default{components: {comForm},data(){return{title:'',dialogVisible:false,}},methods:{add () {this.dialogVisible = true},// 确定handleOk(){this.$refs.realForm.submitForm();},// form 触发此方法submitCallback(){this.$emit('ok',this.$refs.realForm.model); //触发list页面ok的方法this.dialogVisible = false;},}  }
</script>
<style>
</style>

四、【公共js】 common.js

import Vue from 'vue'export const CommonJs = {data(){return {queryParam: {},      // 列表主页面查询条件tableData: [],      // 表格数据// 分页参数params: {currPage: 1,     //初始页面pageSize: 5,  // 每页的数据totalCount: 0,  //总共多少条数据pageSizeArr:[2, 5, 10, 50,100,300],    //条数切换layout:'total,sizes, prev, pager, next, jumper',condition:{}},checkData: [],     // table 选中数据checkDataID: [], // table选中数据ID}},created() {this.loadData();},methods:{// ********************一、【新增】 弹框出现到保存成功，重新回调列表方法******************************************************************// 新增handleAdd(m) {this.$refs.modalForm.add();this.$refs.modalForm.title = "新建" + m;this.$refs.modalForm.disableSubmit = false;},// 新增弹框 保存方法（获取form值；调用保存接口；清空列表勾选）modalFormOk(params){console.log(params)   //$emit传参// 新增/修改 成功时，重载列表this.loadData();   //清空列表选中this.$refs.table.clearSelection()   this.onClearSelected()},// 新增弹窗 保存方法清空列表选中的值onClearSelected(){this.checkData = [];  // table 选中数据this.checkDataID = []; // table选中数据ID},// ********************二、【列表】*********************************// 初始化获取列表数据loadData(){var _this = this;this.$http.post(this.url.list, this.params).then(function(res) {if (res.data.resultcode == 200) {_this.tableData = res.data.result;_this.params.totalCount = Number(res.data.total)}}).catch((error) => {});},// 查询conditionQuery() {// 对象拼接// this.params = Object.assign(this.params,this.queryParam);this.params.condition = this.queryParam;this.loadData();},// 重置resetQuery() {this.queryParam = {};this.params.condition = {}this.params.currPage = 1 this.params.pageIndex = 1;this.loadData();},// 列表复选框选中赋值handleSelectionChange(val) {this.checkData = val;},/*分页的记忆功能，分页保存选中的数据:row-key="getRowKeys":reserve-selection="true"*/getRowKeys(row) {return row.order_num; // n_ID为列表数据的唯一标识},// 分页每页展示条数更改handleSizeChange(val) {this.params.currPage = 1;this.params.pageSize = val;this.loadData();},//分页切换handleCurrentChange(val) {this.params.pageIndex = val;this.loadData();},}
}

vue + element 实现主页面，主页面查询，新增模态框功能相关推荐

vue element table 相关页面跳转实例代码
vue element table 相关页面跳转实例代码 <el-table-column width="100px" align="center" la ...
vue+element ui 设置页面全屏全屏和退出全屏的切换
vue+element ui 设置页面全屏全屏和退出全屏的切换方式1 screenfull 插件 // 属性 screenfull.isFullscreen; // 判断当前页是否全屏返回类型 ...
VUE调用WEB3.0实现代币查询，批量转账功能
VUE调用WEB3.0实现代币查询,批量转账功能 DeFi的爆火让越来越多的人开始关注去中心化这一概念,这也将是网络中的下一个前沿,Web3.0提出了一种去中心化的替代方案,建立在点对点的模式上.下面 ...
html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
【笔记】Vue Element+Node.js开发企业通用管理后台系统——电子书解析功能开发
文章目录一.电子书解析 1.构建函数 2.从文件创建 Book 对象 3.电子书解析 (1)epub 库集成 (2)使用 epub 库解析电子书 (3)epub 库获取图片逻辑修改 (4)电子书目录 ...
同一页面无法显示多个模态框的解决办法
问题描述:第一个模态框可以正常弹出,第二个模态框只显示阴影,无弹出. 解决办法:在两个模态框的代码外分别包裹div. 如图所示,这是一个修改教师信息的弹出框,模态框的具体代码被我折叠了,大家看包裹的模 ...
《进销存 ——“商品查询/新增”》
<进销存 --"商品查询/新增"> 一.查询功能实现商品查询主要包括下拉框查询.模糊查询的功能商品查询图片:见图1(下拉框查询).图2模糊查询.图3下拉框+模糊查询 ...
vue模态框组件拿不到dom元素
今天在写模态框的组件时,在一个页面引入了模态框组件.但是模态框设置初始是不显示的,然后我在模态框组件里面的mouted里面拿到dom元素,按理来说mouted都已经加载完元素了,但是我不管是通过doc ...
实战 | Vue + Element UI 页面创建
这是小小本周的第六篇,本篇将会着重讲解关于Vue和Element UI 相关的内容思维导图网页版Vue Cli 基本使用这里使用Vue Cli 进行基本的使用安装 npm install -g ...

vue + element 实现主页面，主页面查询，新增模态框功能

效果图

一、【主页面】list.vue

二、【新增form表单】comForm.vue

三、【新增模态框】comModal.vue

四、【公共js】 common.js

vue + element 实现主页面，主页面查询，新增模态框功能相关推荐

最新文章

热门文章