ElementUI嵌套頁面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例
更新時間：2022年07月24日 08:50:29 作者：folyh
本文主要介紹了ElementUI嵌套頁面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
本文大概內(nèi)容：
例如：隨著ElementUI前后端交互的技術(shù)的更新，用戶的的體驗(yàn)越來越好。本文主要針對用戶在保持原頁面結(jié)構(gòu)，再添加另一個頁面，并可以按需要調(diào)整兩個頁面之間的比例大小.
一、ElementUI如何在原有頁面添加另外一個頁面并實(shí)現(xiàn)關(guān)聯(lián)增刪查改？
示例：如下圖，我們在原來頁面增刪查改及基礎(chǔ)上，選中某一行，點(diǎn)擊該公司后，直接在該頁面展示關(guān)聯(lián)的所有企業(yè)客戶的頁面，并且實(shí)現(xiàn)查詢、批量刪除、分頁等功能。（注意：彈框也可以實(shí)現(xiàn)，但是我們希望可以少去打開及關(guān)閉彈框的操作步驟，而且同一頁面顯示更直接、方便）
如：要展示的頁面
二、實(shí)現(xiàn)步驟
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">關(guān)聯(lián)企業(yè)</span>
<el-form ref="companySearchForm" :model="filterParams" :inline="true" >
<el-form-item >
<el-input v-model="filterParams.companyName" placeholder="企業(yè)名稱" 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="企業(yè)名稱"></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 欄內(nèi)設(shè)置 @row-click="companyClick"點(diǎn)擊事件，并且設(shè)置點(diǎn)擊時高亮，highlight-current-row
1.3 第2頁面其實(shí)跟第1頁面都差不多，但是要注意像表格數(shù)據(jù)映射名字要換一個名字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="執(zhí)照編號" 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">關(guān)聯(lián)企業(yè)</span>
<div>
<el-form ref="companySearchForm" :model="filterParams" :inline="true" >
<el-form-item >
<el-input v-model="filterParams.companyName" placeholder="企業(yè)名稱" 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="企業(yè)名稱"></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代碼：主要是以下方法調(diào)用理清關(guān)系
上述方法代碼如下：
// 點(diǎn)擊開票單位獲取相關(guān)公司客戶
companyClick: function(row){
var _this = this;
_this.filterParams.current = 1;
_this.filterParams.invoiceCompanyid = row.id;
_this.getPageCompany();
},
// 第2頁面根據(jù)不同頁面查詢結(jié)果
currentChange: function (current) {
this.filterParams.current = current;
this.getPageCompany();
},
// 第2頁面查詢公司客戶的方法（上述點(diǎn)擊查詢方法也是這個）
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.最后的頁面如下：
到此這篇關(guān)于ElementUI嵌套頁面及關(guān)聯(lián)增刪查改實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Element嵌套頁面及關(guān)聯(lián)增刪查改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue實(shí)現(xiàn)輸入框回車發(fā)送和粘貼文本與圖片功能
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)聊天輸入框回車發(fā)送、粘貼文本（包括HTML）、粘貼圖片等功能，文中的實(shí)現(xiàn)方法講解詳細(xì)，需要的可以參考一下2022-05-05
vite+vue3項目中svg圖標(biāo)組件封裝的過程詳解
這篇文章主要介紹了vite+vue3項目中svg圖標(biāo)組件封裝的過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
vue組件庫的在線主題編輯器的實(shí)現(xiàn)思路
這篇文章主要介紹了vue組件庫的在線主題編輯器的實(shí)現(xiàn)思路，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
Vue對Element中el-tab-pane添加@click事件無效問題解決
這篇文章主要給大家介紹了關(guān)于Vue對Element中el-tab-pane添加@click事件無效問題的解決辦法,文中通過圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue3+vite+ts之a(chǎn)xios的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
@change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器，這篇文章主要介紹了vue的@change的用法,需要的朋友可以參考下2023-10-10
關(guān)于vue3.0中的this.$router.replace({ path: ''/''})刷新無效果問題
這篇文章主要介紹了關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue移動端自適應(yīng)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
防抖和節(jié)流是我們在開發(fā)過程中常用優(yōu)化性能的方式,可以減少不必要的計算,不浪費(fèi)資源,只在適合的時候再進(jìn)行觸發(fā)計算,這篇文章主要給大家介紹了關(guān)于vue中防抖和節(jié)流使用的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue登錄注冊及token驗(yàn)證實(shí)現(xiàn)代碼
在vue單頁中，我們可以通過監(jiān)控route對象，從中匹配信息去決定是否驗(yàn)證token，然后定義后續(xù)行為。下面通過實(shí)例代碼給大家分享vue登錄注冊及token驗(yàn)證功能，需要的朋友參考下吧2017-12-12