ElementUI嵌套页面及关联增删查改实现示例
作者：folyh 发布时间：2023-07-02 16:54:45
标签：Element,嵌套页面,增删查改
前言
本文大概内容：
例如：随着ElementUI前后端交互的技术的更新，用户的的体验越来越好。本文主要针对用户在保持原页面结构，再添加另一个页面，并可以按需要调整两个页面之间的比例大小.
一、ElementUI如何在原有页面添加另外一个页面并实现关联增删查改？
示例：如下图，我们在原来页面增删查改及基础上，选中某一行，点击该公司后，直接在该页面展示关联的所有企业客户的页面，并且实现查询、批量删除、分页等功能。（注意：弹框也可以实现，但是我们希望可以少去打开及关闭弹框的操作步骤，而且同一页面显示更直接、方便）
如：要展示的页面
二、实现步骤
1.ElementUI代码
第1页面的代码如下（示例）：
// 前面搜索框的代码省略....
<el-table stripe style="width:100％;" ref="table" :data="tableData" :default-sort="defaultSort"
height="600px" row-key="id" highlight-current-row @row-click="companyClick"
@selection-change="handleSelection" @sort-change="handleSort">
<el-table-column prop="id" label="ID" type="selection"></el-table-column>
<el-table-column type="index" width="60px" label="行号"></el-table-column>
<el-table-column prop="name" label="单位名称" width="300"></el-table-column>
<el-table-column prop="type" label="单位类型" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 'A'" size="small" type="warning">A类(收税)</el-tag>
<el-tag v-else size="small" type="success">B类(免税)</el-tag>
</template>
</el-table-column>
// 中间省略若干....
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button size="mini" type="success" icon="icon iconfont icon-jihuopeizhi"
@click="handleInvCo(scope.row)">修改
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background highlight-current-row
@size-change="handleSizeChange" @current-change="handleCurChange"
:current-page="curPage" :page-size="pageSize" :page-sizes="pageSizes" :total="total"
layout="prev, pager, next, total, sizes, jumper">
</el-pagination>
第2页面的代码如下（示例）：
<span slot="header">关联企业</span>
<el-form ref="companySearchForm" :model="filterParams" :inline="true" >
<el-form-item >
<el-input v-model="filterParams.companyName" placeholder="企业名称" size="mini"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getPageCompany" size="mini">查询</el-button>
</el-form-item>
</el-form>
<el-button type="danger" icon="el-icon-delete" @click="deleteAll" size="mini">删除</el-button>
<el-table ref="table" :data="companyTableData" height="540px" @selection-change="handleSelection">
<el-table-column prop="companyid" label="companyid" type="selection" width="55"></el-table-column>
<el-table-column prop="companyName" label="企业名称"></el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="pageTotal" @current-change="currentChange" >
</el-pagination>
2.思路：很简单
1.1 首先通过el-row、el-col、el-card等将两个页面组合在一起。
1.2 其次在首页el-table 栏内设置 @row-click="companyClick"点击事件，并且设置点击时高亮，highlight-current-row
1.3 第2页面其实跟第1页面都差不多，但是要注意像表格数据映射名字要换一个名字ref="table" :data="companyTableData"，及分页也要换一个名字el-pagination :total="pageTotal" @current-change="currentChange"
1.3 最后两个页面的elementui代码如下：
<el-row :gutter="24">
<el-col :span="16">
<el-card>
<span slot="header">开票单位</span>
<div>
<el-row>
<el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="addInvCo()">添加</el-button>
<el-button type="warning" icon="el-icon-delete" size="mini" @click="handleDeletes()">删除</el-button>
</el-row>
<el-table stripe style="width:100％;" ref="table" :data="tableData" :default-sort="defaultSort"
height="600px" row-key="id" highlight-current-row @row-click="companyClick"
@selection-change="handleSelection" @sort-change="handleSort">
<el-table-column prop="id" label="ID" type="selection"></el-table-column>
<el-table-column type="index" width="60px" label="行号"></el-table-column>
<el-table-column prop="name" label="单位名称" width="300"></el-table-column>
<el-table-column prop="type" label="单位类型" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 'A'" size="small" type="warning">A类(收税)</el-tag>
<el-tag v-else size="small" type="success">B类(免税)</el-tag>
</template>
</el-table-column>
<el-table-column prop="license" label="执照编号" width="300"></el-table-column>
<el-table-column prop="legalPerson" label="法人" width="150"></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button size="mini" type="success" icon="icon iconfont icon-jihuopeizhi"
@click="handleInvCo(scope.row)">修改
</el-button>
</template>
</el-table-column>
</el-table>
<el-row style="text-align: right;margin-top: 10px">
<el-pagination background highlight-current-row
@size-change="handleSizeChange" @current-change="handleCurChange"
:current-page="curPage" :page-size="pageSize" :page-sizes="pageSizes" :total="total"
layout="prev, pager, next, total, sizes, jumper">
</el-pagination>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card>
<span slot="header">关联企业</span>
<div>
<el-form ref="companySearchForm" :model="filterParams" :inline="true" >
<el-form-item >
<el-input v-model="filterParams.companyName" placeholder="企业名称" size="mini"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getPageCompany" size="mini">查询</el-button>
</el-form-item>
</el-form>
<el-row>
<el-button type="danger" icon="el-icon-delete" @click="deleteAll" size="mini">删除</el-button>
</el-row>
<el-table ref="table" :data="companyTableData" height="540px" @selection-change="handleSelection">
<el-table-column prop="companyid" label="companyid" type="selection" width="55"></el-table-column>
<el-table-column prop="companyName" label="企业名称"></el-table-column>
</el-table>
<el-row style="text-align: right;margin-top: 10px">
<el-pagination background layout="prev, pager, next" :total="pageTotal" @current-change="currentChange" >
</el-pagination>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
js代码：主要是以下方法调用理清关系
上述方法代码如下：
// 点击开票单位获取相关公司客户
companyClick: function(row){
var _this = this;
_this.filterParams.current = 1;
_this.filterParams.invoiceCompanyid = row.id;
_this.getPageCompany();
},
// 第2页面根据不同页面查询结果
currentChange: function (current) {
this.filterParams.current = current;
this.getPageCompany();
},
// 第2页面查询公司客户的方法（上述点击查询方法也是这个）
getPageCompany: function(){
var _this = this;
_this.doGetData(_this.companyBindListUrl,_this.filterParams,function (r) {
if(r.success){
_this.companyTableData = r.data;
_this.pageTotal = r.total;
}
})
},
3.最后的页面如下：
来源：https://www.cnblogs.com/folyh/p/16513244.html
0
投稿猜你喜欢
1.什么是临时表内部临时表是sql语句执行过程中，用来存储中间结果的的数据表，其作用类似于：join语句执行过程中的joinbuffer，o- 前言本文主要介绍的是利用python爬取京东商城的方法，文中介绍的非常详细，下面话不多说了，来看看详细的介绍吧。主要工具scrapyBeau
- 下面的路径介绍针对windows在编写的py文件中打开文件的时候经常见到下面其中路径的表达方式：open('aaa.txt'
- callable函数可用于判断一个对象是否可以被调用，若对象可以被调用则返回True,反之则返回False。所谓可调用，是指代码里可以在对象
- 这篇文章主要介绍了JavaScript回调函数callback用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学
- 实现对下一个单词的预测RNN 原理自己找，这里只给出简单例子的实现代码import tensorflow as tfimport numpy
- 官方文档：https://elasticsearch-py.readthedocs.io/en/master/1、介绍python提供了操作
- 有一道算法题题目的意思是在二维数组里找到一个峰值。要求复杂度为n。解题思路是找田字（四边和中间横竖两行）中最大值，用分治法递归下一个象限的田
- 本文简介前段时间，黄同学写了一篇《MySQL窗口实战》文章（文章如下），但是里面大多数是以实战练习为主，没有做详细的解释。传送门：MySQL
- 原来工作中曾经碰到过UL列表里一些异常的表现,加上昨天看到了http://bbs.blueidea.com/thread-2984871-1
- 1. 时间的表示Go 语言中时间的表示方式是通过 time.Time 结构体来表示的。time.Time 类型代表了一个时刻，它包含了年月日
- 相信做过自动化运维的同学都用过REST API接口来完成某些动作。API是一套成熟系统所必需的接口，可以被其他系统或脚本来调用，这也是自动化
- match()方法用于从字符串中查找指定的值本方法类似于indexOf()和lastindexOf()，不同的是它返回的是指定的值，而不是指
- 一、什么是sql子查询？ 子查询是一个嵌套在Select 、Insert 、Update 或Dele
- 内容摘要：现在博客很流行，相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友，可能更喜欢自己去下载一
- 前言yolo算法作为one-stage领域的佼佼者，采用anchor-based的方法进行目标检测，使用不同尺度的anchor直接回归目标框
- 在做语义分割项目时，标注的图片不合标准，而且类型是RGBA型，且是A的部分表示的类别，因此需要将该图片转化为RGB图片# -*- codin
- 最近邻：import cv2import numpy as npdef function(img): height,width,channe
- 如何下载最新版本的MySQL？我先去MySQL首页下载最新版本的MySQL-链接：https://www.mysql.com/downloa
- 本文实例讲述了django框架模板中定义变量的方法。分享给大家供大家参考，具体如下：总有一些情况，你会想在django template中设
