vue elementui table編輯表單時(shí)彈框增加編輯明細(xì)數(shù)據(jù)的實(shí)現(xiàn)
更新時(shí)間：2024年10月17日 11:22:54 作者：weixin_45616483
在Vue項(xiàng)目中,通過使用Element UI框架實(shí)現(xiàn)表單及其明細(xì)數(shù)據(jù)的新增和編輯操作,主要通過彈窗形式進(jìn)行明細(xì)數(shù)據(jù)的增加和編輯,有效提升用戶交互體驗(yàn),本文詳細(xì)介紹了相關(guān)實(shí)現(xiàn)方法和代碼,適合需要在Vue項(xiàng)目中處理復(fù)雜表單交互的開發(fā)者參考
需求:
前端進(jìn)行新增表單時(shí)，同時(shí)增加表單的明細(xì)數(shù)據(jù)。明細(xì)數(shù)據(jù)部分，通過彈框方式增加或者編輯。
效果圖：
代碼：
<!-- 新增主表彈窗 Begin -->
<el-dialog
:title="titleInfo"
top="5vh"
center
width="85%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="dialogVisible"
>
<span>
<el-form
ref="form"
:rules="formRules"
:model="form"
style="margin: 0 auto"
label-width="32%"
>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="申請(qǐng)日期:" prop="applyDate">
<el-date-picker
v-model="form.applyDate"
style="width: 80%"
clearable
type="date"
value-format="yyyy-MM-dd"
placeholder="請(qǐng)選擇申請(qǐng)日期"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="14">
<el-form-item
prop="applyDept"
label="申請(qǐng)部門:"
label-width="30%"
>
<el-select
v-model="form.applyDept"
style="width: 80%"
:disabled="true"
>
<el-option
v-for="item in deptLists"
:key="item.id"
:label="item.departName"
:value="item.orgCode"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item
prop="applyUsername"
label="申請(qǐng)人:"
label-width="30%"
>
<el-input
v-model="form.applyUsername"
style="width: 70%"
:disabled="true"
/>
</el-form-item>
</el-col>
</el-col>
</el-row>
</el-form>
<el-card>
<div slot="header">
<span style="font-weight: bold">外來人員名單</span>
<el-button
style="float: right"
type="primary"
@click="insertExterRow"
>添加</el-button
>
</div>
<el-table
ref="exterTable"
align="center"
highlight-cell
keep-source
stripe
border
style="width: 100%"
max-height="400"
:data="exterTableData"
:edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
>
<el-table-column prop="useUser" label="姓名" align="center" />
<el-table-column prop="idCard" label="身份證號(hào)" align="center" />
<el-table-column prop="phone" label="手機(jī)號(hào)" align="center" />
<el-table-column label="操作" align="center" width="220">
<template slot-scope="scope">
<el-button
mode="text"
icon="el-icon-edit"
@click="editExterRow(scope.$index, scope.row)"
/>
<el-button
mode="text"
icon="el-icon-delete"
@click="removeExterRow(scope.$index, scope.row)"
/>
</template>
</el-table-column>
</el-table>
</el-card>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取消</el-button>
<el-button type="success" :loading="saveLoading" @click="save"
>保存</el-button
>
</span>
</el-dialog>
<!-- 新增主表彈窗 End -->
<!-- 外來人員彈窗 Start-->
<el-dialog
:title="exterTitleInfo"
top="5vh"
center
width="50%"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="exterDialogVisible"
>
<span>
<el-form
ref="exterForm"
:rules="exterFormRules"
:model="exterForm"
style="margin: 0 auto"
label-width="25%"
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="姓名:" prop="useUser">
<el-input
v-model="exterForm.useUser"
placeholder="請(qǐng)輸入姓名"
style="width: 80%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="身份證號(hào):" prop="idCard">
<el-input
v-model="exterForm.idCard"
placeholder="請(qǐng)輸入身份證號(hào)"
style="width: 80%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="手機(jī)號(hào):" prop="phone">
<el-input
v-model="exterForm.phone"
placeholder="請(qǐng)輸入手機(jī)號(hào)"
style="width: 80%"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelExter">取消</el-button>
<el-button type="success" :loading="exterSaveLoading" @click="saveExter"
>保存</el-button
>
</span>
</el-dialog>
<!--外來人員彈窗 End-->
export default {
data() {
return {
// 表單
form: {},
exterForm: {},
exterTableData: [],
//form表單驗(yàn)證規(guī)則
exterFormRules: {}
}
},
methods: {
// 添加一行，外來人員信息
insertExterRow() {
this.exterTitleInfo = '外來人員信息新增'
this.exterForm = {}
this.exterDialogVisible = true
this.selectExterRow = null
this.$nextTick(() => {
this.$refs.exterForm.clearValidate() // 移除校驗(yàn)結(jié)果
})
},
// 編輯一行，外來人員信息
editExterRow(index, row) {
this.exterTitleInfo = '外來人員信息編輯'
this.exterDialogVisible = true
this.selectExterRow = row
this.exterForm = Object.assign({}, row)
this.$nextTick(() => {
this.$refs.exterForm.clearValidate() // 移除校驗(yàn)結(jié)果
})
},
// 刪除一行，外來人員信息
removeExterRow(index, row) {
this.$confirm('此操作將永久刪除當(dāng)前信息, 是否繼續(xù)?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning',
center: true
})
.then(() => {
this.exterTableData.splice(index, 1)
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
})
})
},
// 保存外來人員信息
saveExter() {
this.$refs.exterForm.validate((valid) => {
if (valid) {
this.exterSaveLoading = true
if (this.selectExterRow) {
Object.assign(this.selectExterRow, this.exterForm)
} else {
this.exterTableData.push(this.exterForm)
}
this.exterSaveLoading = false
this.exterDialogVisible = false
} else {
return false
}
})
},
cancelExter() {
this.exterForm = {}
this.exterDialogVisible = false
}
}
}到此這篇關(guān)于vue elementui table編輯表單時(shí)彈框增加編輯明細(xì)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue elementui table編輯表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了如何運(yùn)行vue項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue.config.productionTip?=?false?不起作用的問題及解決
這篇文章主要介紹了Vue.config.productionTip?=?false為什么不起作用,本文給大家分析問題原因解析及解決方案，需要的朋友可以參考下2022-11-11
使用WebStorm開發(fā)Vue3項(xiàng)目及其他問題詳解
這篇文章主要介紹了在WebStorm中配置Vu3項(xiàng)目的詳細(xì)步驟,還解決了ElementPlus與Sass版本兼容性問題,并提供了詳細(xì)的配置和運(yùn)行步驟,需要的朋友可以參考下2025-02-02
vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決
這篇文章主要介紹了vue 保留兩位小數(shù) 不能直接用toFixed(2) 的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性2022-08-08
基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別(詳解)
下面小編就為大家分享一篇基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Vue動(dòng)態(tài)路由路徑重復(fù)及刷新丟失頁面問題的解決
這篇文章主要介紹了Vue動(dòng)態(tài)路由路徑重復(fù)及刷新丟失頁面問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
使用Vue Router進(jìn)行路由組件傳參的實(shí)現(xiàn)方式
Vue Router 為 Vue.js 應(yīng)用提供了完整的路由解決方案,其中包括了組件間的數(shù)據(jù)傳遞功能,通過路由組件傳參,我們可以輕松地在導(dǎo)航到新頁面時(shí)傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進(jìn)行路由組件間的傳參,并通過多個(gè)示例來展示其實(shí)現(xiàn)方式2024-09-09
vue 1.0 結(jié)合animate.css定義動(dòng)畫效果
本文分步驟給大家介紹了Vue 1.0自定義動(dòng)畫效果，vue1.0代碼結(jié)合animate.css定義動(dòng)畫，頁面一定要引入animate.cdd，具體實(shí)例代碼大家參考下本文2018-07-07