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
投稿猜你喜欢
- bytes 和 bytearraybytes 和 bytearray 都是二进制世界的成员，用二进制的方式去理解才能看清他的本质。理解byt
本文实例讲述了Python使用matplotlib绘制多个图形单独显示的方法。分享给大家供大家参考，具体如下：一 代码import nump- 前言主要介绍OpenCV中的分水岭算法、图像金字塔对图像进行分割的方法。一、使用分水岭算法分割图像分水岭算法的基本原理为：将任意的灰度图像视
- 前言Golang中当程序发生致命异常时（比如数组下标越界，注意这里的异常并不是error），Golang程序会panic（运行时恐慌）。当程
- 使用python3创建多线程聊天室，供大家参考，具体内容如下import threading import socket#socketudp
- python 自动化批量生成前端的HTML可以大大减轻工作量下面演示两种生成 HTML 的方法方法一：使用 webbrowser#codin
- 通常情况下：from threading import Threadglobal_num = 0def func1(): global gl
- 正在看的ORACLE教程是:常见数据库系统比较 Oracle数据库。提起数据库，第一个想到的公司，一般都会是Oracle。该公司
- 前言Python一般使用Matplotlib制作统计图形，用它自己的说法是‘让简单的事情简单，让复杂的事情变得可能'。用它可以制作折
- 为了降低用户注册难度，国际站的主注册表单一直在改进。主注册三月至今发生了两次较大的变化，现在对表单调整的地方分解如下：1． 两步
- HTML实体符号被用作实现保留字符（reserved characters）或者表达键盘无法输入的一些常用字符。在大多数浏览器中默认的字符集
- 在这之前我们先回顾以前用php导出excel，我直接写成方法在这里：public static function phpExcelList(
- 实战场景经常有朋友问，学 Python 面向对象时，翻阅别人代码，会发现一个 super() 函数，那这个函数的作用到底是什么？super(
- 我们需要做的第⼀件事情是获取 MNIST 数据。如果你是⼀个 git ⽤⼾，那么你能够通过克隆这本书的代码仓库获得数据，实现我们的⽹络来分类
- 基本映射映射使用在根据不同URLs请求来产生相对应的返回内容.Bottle使用route() 修饰器来实现映射.from bottle im
- 一、引言Pillow，是Python Imaging Library (PIL)的一个分支，用于处理图像。它是Python编程语言中最常用的
- varchar(n)长度为 n 个字节的可变长度且非 Unicode 的字符数据。n 必须是一个介于 1 和 8,000 之间的数值。存储大
- 1 锁片化的产生1.1 产生碎片化的原因1、在B-tree索引中，表数据按照聚集索引的排序进行物理存储，若聚集索引离散化比较严重，那么可能会
- 前段时间用C语言做了个字符版的推箱子，着实是比较简陋。正好最近用到了Python，然后想着用Python做一个图形界面的推箱子。这回可没有C
- 下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a>
