@
- 前言
- 一、ElementUI如何在原有页面添加另外一个页面并实现关联增删查改？
- 二、实现步骤
- 1.ElementUI代码
- 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代码如下：
- 2.js代码：主要是以下方法调用理清关系
- 3.最后的页面如下：
提示：本文仅供学习交流，请勿用于非法活动！
前言
本文大概内容：
例如：随着ElementUI前后端交互的技术的更新，用户的的体验越来越好。本文主要针对用户在保持原页面结构，再添加另一个页面，并可以按需要调整两个页面之间的比例大小.
一、ElementUI如何在原有页面添加另外一个页面并实现关联增删查改？
示例：如下图，我们在原来页面增删查改及基础上，选中某一行，点击该公司后，直接在该页面展示关联的所有企业客户的页面，并且实现查询、批量删除、分页等功能。（注意：弹框也可以实现，但是我们希望可以少去打开及关闭弹框的操作步骤，而且同一页面显示更直接、方便）
如：要展示的页面
二、实现步骤
1.ElementUI代码
第1页面的代码如下（示例）：
// 前面搜索框的代码省略....
A类(收税)
B类(免税)
// 中间省略若干....
修改
第2页面的代码如下（示例）：
关联企业
查询
删除
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代码如下：
开票单位
添加
删除
A类(收税)
B类(免税)
修改
关联企业
查询
删除
2.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.最后的页面如下：
随心所往，看见未来。Follow your heart，see night！
欢迎点赞、关注、留言，一起学习、交流！
Original: https://www.cnblogs.com/folyh/p/16513244.html
Author: folyh
Title: ElementUI嵌套页面及关联增删查改实现
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/607766/
转载文章受原作者版权保护。转载请注明原作者出处！